`createLucideIcon` from `lucite-react` not working from v13.4.13-canary.5 #53605

joulev · 2023-08-05T09:03:59Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 23.0.0: Tue Jul 18 20:35:32 PDT 2023; root:xnu-10002.0.199.505.1~3/RELEASE_ARM64_T8112
    Binaries:
      Node: 20.3.1
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: 8.6.11
    Relevant Packages:
      next: 13.4.13-canary.16
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

Link to the code that reproduces this issue or a replay of the bug

https://github.com/joulev/debug/tree/nextjs-create-lucide-icon-not-working

To Reproduce

next dev or next build on the reproduction repository.

Describe the Bug

Failed to compile.

./node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-react/dist/esm/lucide-react.mjs
Module not found: Can't resolve '/Users/joulev/dev/www/debug/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-react/dist/esm/icons/create-lucide'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./app/icons.tsx
./app/page.tsx

Expected Behavior

The icon should work normally.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1495

The text was updated successfully, but these errors were encountered:

joulev · 2023-08-05T09:05:20Z

The bug seems to be present from #53051 and #53483 didn't fix it.

cc @shuding

kachkaev · 2023-08-06T11:41:12Z

I can see this too for <SidebarOpenIcon /> after upgrading from 13.4.12 to 13.4.13-canary.16.

Module not found: Can't resolve '/path/to/project/node_modules/.pnpm/[email protected][email protected]/node_modules/lucide-react/dist/esm/icons/sidebar-open'

This icon is an alias to PanelLeftOpen, according to source.

This icon is re-exported from dist/esm/lucide-react.mjs, but it does not exist as a standalone import.

export { default as LucidePanelLeftOpen, default as LucideSidebarOpen, default as PanelLeftOpen, default as PanelLeftOpenIcon, default as SidebarOpen, default as SidebarOpenIcon } from './icons/panel-left-open.mjs';

As a workaround, I replaced <SidebarOpenIcon /> with <PanelLeftOpenIcon /> (same shape, just not an alias).

joulev · 2023-08-06T15:38:31Z

Also,

import { icons } from "lucide-react";

doesn't work either.

Tested with lucite-react v0.264.0 and Next.js canary (v13.4.13-canary.16). lucide-icons/lucide#1471 seems relevant but didn't fix this.

darklight9811 · 2023-08-07T11:44:06Z

This went to 13.4.13

clearly-outsane · 2023-08-07T13:15:15Z

Having the same problem for anything i import from lucide-react

kartikk-k · 2023-08-07T17:15:28Z

Downgrading to "next": "13.4.12" solves the issue temporarily.

ceres-quangd · 2023-08-08T08:58:39Z

thanks @kartikk-k it works to me

effiesayshellotothemeow · 2023-08-08T14:54:15Z

thanks @kartikk-k !!!

JimmyMalark · 2023-08-08T15:05:21Z

It didn't fix the issue for me
I'm in mac m1 using npm version 8.19.3 node version v16.19.1
Tried downgrading nextjs and lucide-react none of them worked

Anyone has a clue why lucide-react even does that?
I mean icons should be stored somewhere but where are they?

kartikk-k · 2023-08-08T15:12:23Z

It didn't fix the issue for me I'm in mac m1 using npm version 8.19.3 node version v16.19.1 Tried downgrading nextjs and lucide-react none of them worked

Anyone has a clue why lucide-react even does that? I mean icons should be stored somewhere but where are they?

@JimmyMalark can you share package.json

JimmyMalark · 2023-08-08T15:16:37Z

@kartikk-k Here you go mate

{
  "name": "next-template",
  "version": "0.0.2",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "preview": "next build && next start",
    "typecheck": "tsc --noEmit",
    "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
    "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache"
  },
  "dependencies": {
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.4.0",
    "clsx": "^1.2.1",
    "lucide-react": "0.105.0-alpha.4",
    "next": "^13.4.13",
    "next-themes": "^0.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sharp": "^0.31.3",
    "tailwind-merge": "^1.13.2",
    "tailwindcss-animate": "^1.0.6"
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
    "@types/node": "^17.0.45",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "@typescript-eslint/parser": "^5.61.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.44.0",
    "eslint-config-next": "13.0.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-tailwindcss": "^3.13.0",
    "postcss": "^8.4.24",
    "prettier": "^2.8.8",
    "tailwindcss": "^3.3.2",
    "typescript": "^4.9.5"
  }
}

I'm actually using the latest next template from shadcn/ui

kartikk-k · 2023-08-08T15:29:26Z

change "next": "13.4.13" to "next": "13.4.12"
Then:

Remove node_modules
run npm i

JimmyMalark · 2023-08-08T17:27:19Z

Ok it worked but now there's this good old question of "Why it worked?" 😅

Thank you

sukalov · 2023-08-08T20:16:53Z

if you don't wanna downgrade next, you can just specify the path to 'lucide-react' module.
smth like this import { Sun, Moon } from '../../node_modules/lucide-react'; worked for me

Victor-Timi · 2023-08-08T23:17:51Z

thanks sukalov this worked for me

JorgeAssaf · 2023-08-09T14:58:12Z

I have changed "next": "13.4.13" to "next": "13.4.12", remove node_modules and run npm i or pnpm i

SahilMahadwar · 2023-08-09T17:48:33Z

seems to be working fine

 "lucide-react": "0.263.1",

itsgoofer · 2023-08-09T18:37:07Z

Confirmed changing lucide-react version to 0.263.1 worked fine without downgrading Next.JS

VictorMarcas · 2023-08-09T19:14:15Z

Confirmed changing lucide-react version to 0.263.1 worked fine without downgrading Next.JS

thanks! I had exactly the same problem, but with this version it has been solved.

dbredvick · 2023-08-09T19:58:19Z

For anyone wondering, the transform for aliased icons was done in this PR (which was based on 0.263.1).

The PR description mentions looking for a way to automate this in the future.

ngarry · 2023-08-10T09:29:13Z

import { whatever } from "../node_modules/lucide-react";

worked for me

chungweileong94 · 2023-08-10T14:27:56Z

Doing ../node_modules/lucide-react doesn't seem that okay to me, especially with pnpm, things might not work as expected.

So I patch the next package instead.

diff --git a/dist/server/config.js b/dist/server/config.js
index 4891e52fa02c90fc6228f0ebc1079e0172addd14..befdf22e0ab38b5a087a8b8744e2dc7cb324a5a2 100644
--- a/dist/server/config.js
+++ b/dist/server/config.js
@@ -490,6 +490,7 @@ function assignDefaults(dir, userConfig, silent = false) {
                 "(Edit2|LucideEdit2|Edit2Icon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/pen!lucide-react",
                 "(Stars|LucideStars|StarsIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/sparkles!lucide-react",
                 "(TextSelection|LucideTextSelection|TextSelectionIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/text-select!lucide-react",
+                "(createLucideIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=./createLucideIcon!lucide-react",
                 // General rules
                 "Lucide(.*)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/{{ kebabCase memberMatches.[1] }}!lucide-react",
                 "(.*)Icon": "modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/{{ kebabCase memberMatches.[1] }}!lucide-react",

CodeZera11 · 2023-08-10T15:16:05Z

Same issue with me trying to add shopping bag icon but getting error.

import { ShoppingBag } from 'lucide-react'
Module not found: Can't resolve '/Users/captaingogo/Coding/ecommerce-project/ecommerce-store/node_modules/lucide-react/dist/cjs/icons/shopping-bag'

but when importing using absolute path "../node_modules/lucide-react" its working

joulev · 2023-08-10T15:18:59Z

One can just say many, if not most, features of lucide-react are not working with Next.js v13.4.13. I now just pause upgrading until a Next.js patch or a lucite-react patch is released.

description of issue vercel/next.js#53605

dialite · 2023-08-15T14:36:19Z

I will recommend you use this path for the 'lucide-react' module as the latest version is still being worked on.
Doing something like this:
import { anything } from '../node_modules/lucide-react'

stebou · 2023-08-17T03:01:41Z

Thank you for the recommendation. I've tried various methods to resolve the issue with the lucide-react module, but unfortunately, none of them have worked for me. I'll give your suggested path a try and see if it resolves the problem. I appreciate your assistance!

stebou · 2023-08-17T03:02:29Z

not good

ananuness · 2023-08-22T02:41:43Z

[email protected] is not working with [email protected], but 0.263.1 it is

…ig (#54572) ## Implementation Base on #54530, we're implementing a `optimize_barrel` transform to optimize barrel files to only export the names we need. If the transformed file isn't a "barrel file", we just re-export the names from it without any transformation. Take `lucide-react` as an example, with #54530 we are able to transform ```js import { IceCream } from 'lucide-react' ``` to ```js import { IceCream } from '__barrel_optimize__?names=IceCream!=!lucide-react?__barrel_optimize_noop__=IceCream' ``` And then, we apply that new request with a new Webpack module rule to use the SWC loader with option `optimizeBarrelExports: ['IceCream']`, which eventually got passed to this new `optimize_barrel` transform and does the optimization. ## Notes We'll have to add a new `getModularizeImportAliases` alias list to map `lucide-react` to the ESM version, as we have the `['main', 'module']` resolve order for the server compiler. Otherwise this optimization doesn't work in that compiler. There's no e2e test added because it's already covered by the `modularize-imports` test as we removed the default `lucide-react` transform rules and it still works. We'll need to test other libs before migrating them to the new `optimizePackageImports` option. --- Closes #54571, closes #53605, closes #53789, closes #53894, closes #54063.

max-programming · 2023-09-08T11:17:29Z

I am on next version 13.4.19 and I still have this issue

joulev · 2023-09-08T12:22:31Z

@max-programming Yeah because the fix here hasn’t landed in the stable channel yet. It works fine in canary now.

akd-io · 2023-09-08T12:23:44Z

@max-programming In other words, will be fixed in 13.4.20.

117 · 2023-09-16T21:57:18Z

works with "next": "^13.4.20-canary.33", and "lucide-react": "^0.279.0",

github-actions · 2023-10-01T00:04:09Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

joulev added the bug Issue was opened via the bug report template. label Aug 5, 2023

balazsorban44 added the linear: next Confirmed issue that is tracked by the Next.js team. label Aug 7, 2023

chungweileong94 mentioned this issue Aug 9, 2023

bug: modularizeImports breaks lucite-react #53702

Closed

1 task

Slyracoon23 mentioned this issue Aug 9, 2023

createLucideIcon from lucite-react not working with Latest Nextjs shadcn-ui/next-template#21

Open

chungweileong94 mentioned this issue Aug 11, 2023

Fix missing transform import for createLucideIcon from lucide-react #53894

Closed

https777 added a commit to https777/simple-blog-template that referenced this issue Aug 15, 2023

downgraded next.js version to fix problem with icons

81cbbda

description of issue vercel/next.js#53605

jd-carroll mentioned this issue Aug 25, 2023

Next.JS Does Not Support Lucide-React Icons #54571

Closed

1 task

shuding mentioned this issue Aug 25, 2023

optimize_barrel SWC transform and new optimizePackageImports config #54572

Merged

shuding closed this as completed in #54572 Aug 25, 2023

github-actions bot added the locked label Oct 1, 2023

github-actions bot locked as resolved and limited conversation to collaborators Oct 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`createLucideIcon` from `lucite-react` not working from v13.4.13-canary.5 #53605

`createLucideIcon` from `lucite-react` not working from v13.4.13-canary.5 #53605

joulev commented Aug 5, 2023 •

edited by padmaia

Loading

joulev commented Aug 5, 2023

kachkaev commented Aug 6, 2023 •

edited

Loading

joulev commented Aug 6, 2023

darklight9811 commented Aug 7, 2023

clearly-outsane commented Aug 7, 2023 •

edited

Loading

kartikk-k commented Aug 7, 2023

ceres-quangd commented Aug 8, 2023

effiesayshellotothemeow commented Aug 8, 2023

JimmyMalark commented Aug 8, 2023

kartikk-k commented Aug 8, 2023

JimmyMalark commented Aug 8, 2023 •

edited

Loading

kartikk-k commented Aug 8, 2023

JimmyMalark commented Aug 8, 2023

sukalov commented Aug 8, 2023

Victor-Timi commented Aug 8, 2023

JorgeAssaf commented Aug 9, 2023

SahilMahadwar commented Aug 9, 2023

itsgoofer commented Aug 9, 2023

VictorMarcas commented Aug 9, 2023

dbredvick commented Aug 9, 2023

ngarry commented Aug 10, 2023

chungweileong94 commented Aug 10, 2023

CodeZera11 commented Aug 10, 2023 •

edited

Loading

joulev commented Aug 10, 2023 •

edited

Loading

dialite commented Aug 15, 2023 •

edited

Loading

stebou commented Aug 17, 2023

stebou commented Aug 17, 2023

ananuness commented Aug 22, 2023

max-programming commented Sep 8, 2023

joulev commented Sep 8, 2023

akd-io commented Sep 8, 2023

117 commented Sep 16, 2023

github-actions bot commented Oct 1, 2023

createLucideIcon from lucite-react not working from v13.4.13-canary.5 #53605

createLucideIcon from lucite-react not working from v13.4.13-canary.5 #53605

Comments

joulev commented Aug 5, 2023 • edited by padmaia Loading

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue or a replay of the bug

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

joulev commented Aug 5, 2023

kachkaev commented Aug 6, 2023 • edited Loading

joulev commented Aug 6, 2023

darklight9811 commented Aug 7, 2023

clearly-outsane commented Aug 7, 2023 • edited Loading

kartikk-k commented Aug 7, 2023

ceres-quangd commented Aug 8, 2023

effiesayshellotothemeow commented Aug 8, 2023

JimmyMalark commented Aug 8, 2023

kartikk-k commented Aug 8, 2023

JimmyMalark commented Aug 8, 2023 • edited Loading

kartikk-k commented Aug 8, 2023

JimmyMalark commented Aug 8, 2023

sukalov commented Aug 8, 2023

Victor-Timi commented Aug 8, 2023

JorgeAssaf commented Aug 9, 2023

SahilMahadwar commented Aug 9, 2023

itsgoofer commented Aug 9, 2023

VictorMarcas commented Aug 9, 2023

dbredvick commented Aug 9, 2023

ngarry commented Aug 10, 2023

chungweileong94 commented Aug 10, 2023

CodeZera11 commented Aug 10, 2023 • edited Loading

joulev commented Aug 10, 2023 • edited Loading

dialite commented Aug 15, 2023 • edited Loading

stebou commented Aug 17, 2023

stebou commented Aug 17, 2023

ananuness commented Aug 22, 2023

max-programming commented Sep 8, 2023

joulev commented Sep 8, 2023

akd-io commented Sep 8, 2023

117 commented Sep 16, 2023

github-actions bot commented Oct 1, 2023

`createLucideIcon` from `lucite-react` not working from v13.4.13-canary.5 #53605

`createLucideIcon` from `lucite-react` not working from v13.4.13-canary.5 #53605

joulev commented Aug 5, 2023 •

edited by padmaia

Loading

kachkaev commented Aug 6, 2023 •

edited

Loading

clearly-outsane commented Aug 7, 2023 •

edited

Loading

JimmyMalark commented Aug 8, 2023 •

edited

Loading

CodeZera11 commented Aug 10, 2023 •

edited

Loading

joulev commented Aug 10, 2023 •

edited

Loading

dialite commented Aug 15, 2023 •

edited

Loading