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

[joulev]

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

[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). lucide-icons/lucide#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