next.js: `createLucideIcon` from `lucite-react` not working from v13.4.13-canary.5

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/lucide-react@0.263.1_react@18.2.0/node_modules/lucide-react/dist/esm/lucide-react.mjs
Module not found: Can't resolve '/Users/joulev/dev/www/debug/node_modules/.pnpm/lucide-react@0.263.1_react@18.2.0/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

About this issue

Original URL
State: closed
Created a year ago
Reactions: 16
Comments: 33 (9 by maintainers)

Commits related to this issue

downgraded next.js version to fix problem with icons description of issue https://github.com/vercel/next.js/issues/53605 — committed to piotrszubert/simple-blog-template by piotrszubert a year ago
`optimize_barrel` SWC transform and new `optimizePackageImports` config (#54572) ## Implementation Base on #54530, we're implementing a `optimize_barrel` transform to optimize barrel files to onl... — committed to vercel/next.js by shuding 10 months ago

Most upvoted comments

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

+27

kartikk-k on Aug 7, 2023

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

+19

sukalov on Aug 8, 2023

seems to be working fine

 "lucide-react": "0.263.1",

+11

SahilMahadwar on Aug 9, 2023

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

Remove node_modules
run npm i

+10

kartikk-k on Aug 8, 2023

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

itsgoofer on Aug 9, 2023

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

clearly-outsane on Aug 7, 2023

thanks sukalov this worked for me

Victor-Timi on Aug 8, 2023

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.

VictorMarcas on Aug 9, 2023

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). https://github.com/lucide-icons/lucide/pull/1471 seems relevant but didn’t fix this.

joulev on Aug 6, 2023

lucide-react@0.268.0 is not working with nextjs@13.4.13, but 0.263.1 it is

ananuness on Aug 22, 2023

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",

chungweileong94 on Aug 10, 2023

thanks @kartikk-k it works to me

ceres-quangd on Aug 8, 2023

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

cc @shuding

joulev on Aug 5, 2023