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

[joulev]

Verify canary release

• [X] 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

[joulev]

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

cc @shuding

[kachkaev]

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/lucide-react@0.263.1_react@18.2.0/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]

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.

[darklight9811]

This went to 13.4.13

[clearly-outsane]

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

[kartikk-k]

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

[ceres-quangd]

thanks @kartikk-k it works to me

[effiesayshellotothemeow]

thanks @kartikk-k !!!

[JimmyMalark]

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]

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]

@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]

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

1. Remove node_modules
2. run npm i

[JimmyMalark]

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

Thank you

[sukalov]

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

[Victor-Timi]

thanks sukalov this worked for me

[JorgeAssaf]

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

[SahilMahadwar]

seems to be working fine

 "lucide-react": "0.263.1",

[itsgoofer]

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

[VictorMarcas]

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]

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]

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

worked for me

[chungweileong94]

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]

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]

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.

[dialite]

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]

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]

not good

[ananuness]

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

[max-programming]

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

[joulev]

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

[akd-io]

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

[117]

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

[github-actions[bot]]

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.