Next.JS Does Not Support Lucide-React Icons #54571
Comments
|
For anyone running into this, you can create a patch of your local version of next with the following:
Change the following files (under the next dependency):
In both of those files, change: "lucide-react": {
// Note that we need to first resolve to the base path (`lucide-react`) and join the subpath,
// instead of just resolving `lucide-react/esm/icons/{{kebabCase member}}` because this package
// doesn't have proper `exports` fields for individual icons in its package.json.
transform: {
// Special aliases
"(SortAsc|LucideSortAsc|SortAscIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/arrow-up-narrow-wide!lucide-react",
"(SortDesc|LucideSortDesc|SortDescIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/arrow-down-wide-narrow!lucide-react",
"(Verified|LucideVerified|VerifiedIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/badge-check!lucide-react",
"(Slash|LucideSlash|SlashIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/ban!lucide-react",
"(CurlyBraces|LucideCurlyBraces|CurlyBracesIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/braces!lucide-react",
"(CircleSlashed|LucideCircleSlashed|CircleSlashedIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/circle-slash-2!lucide-react",
"(SquareGantt|LucideSquareGantt|SquareGanttIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/gantt-chart-square!lucide-react",
"(SquareKanbanDashed|LucideSquareKanbanDashed|SquareKanbanDashedIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/kanban-square-dashed!lucide-react",
"(SquareKanban|LucideSquareKanban|SquareKanbanIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/kanban-square!lucide-react",
"(Edit3|LucideEdit3|Edit3Icon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/pen-line!lucide-react",
"(Edit|LucideEdit|EditIcon|PenBox|LucidePenBox|PenBoxIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/pen-square!lucide-react",
"(Edit2|LucideEdit2|Edit2Icon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/pen!lucide-react",
"(Stars|LucideStars|StarsIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/sparkles!lucide-react",
"(TextSelection|LucideTextSelection|TextSelectionIcon)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/text-select!lucide-react",
// General rules
"Lucide(.*)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/{{ kebabCase memberMatches.[1] }}!lucide-react",
"(.*)Icon": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/{{ kebabCase memberMatches.[1] }}!lucide-react",
"*": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/{{ kebabCase member }}!lucide-react"
}
},To: "lucide-react": {
// Note that we need to first resolve to the base path (`lucide-react`) and join the subpath,
// instead of just resolving `lucide-react/esm/icons/{{kebabCase member}}` because this package
// doesn't have proper `exports` fields for individual icons in its package.json.
transform: {
// Alias for createLucideIcon
createLucideIcon: 'modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/createLucideIcon!lucide-react',
// Alias for icons
icons: 'modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/index!lucide-react',
// General rules
"Lucide(.*)": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/{{ kebabCase memberMatches.[1] }}!lucide-react",
"(.*)Icon": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/{{ kebabCase memberMatches.[1] }}!lucide-react",
"*": "modularize-import-loader?name={{ member }}&from=default&as=default&join=../esm/icons/{{ kebabCase member }}!lucide-react"
}
},Save the patch If you're using yarn, you need to run Note: The order of the transforms is really important, specifically the wild card must come last Don't be like me and waste hours trying to debug because you put a transform after the catch all wild card... |
shuding
added a commit
that referenced
this issue
Aug 25, 2023
…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.
|
which next version will solve this problem ? |
|
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Verify canary release
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.5.0: Thu Jun 8 22:22:20 PDT 2023; root:xnu-8796.121.3~7/RELEASE_ARM64_T6000 Binaries: Node: 18.16.1 npm: 9.8.1 Yarn: 1.22.19 pnpm: 8.5.1 Relevant Packages: next: 13.4.20-canary.8 eslint-config-next: 13.4.19 react: 18.2.0 react-dom: 18.2.0 typescript: 5.2.2 Next.js Config: output: N/AWhich 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://codesandbox.io/p/sandbox/xenodochial-paper-gllsfk?file=/app/page.tsx:9,1
To Reproduce
createLucideIcon(example below)Describe the Bug
Next.JS needs to adopt the import mappings provided by
lucide-reactas well as addcreateLucideIconto known transforms.Expected Behavior
The icon be displayed as expected.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
The text was updated successfully, but these errors were encountered: