lucide: Import bug in Next.js (v13.4.13)

@jguddas It would be great if Lucide React can add these aliases. Otherwise we’ll have to maintain a list in Next.js to optimize the imports.

There are more! like e.g. - Check & BadgeCheck…

Same for me, Module not found: Can't resolve '/Users/jordan/project/node_modules/lucide-react/dist/cjs/icons/star'

Same problem

next: 13.4.13 lucide-react: 0.265.0

- error ./node_modules/.pnpm/lucide-react@0.265.0_react@18.2.0/node_modules/lucide-react/dist/cjs/lucide-react.js:2:0
Module not found: Can't resolve '/Users/zdy/Desktop/Project/Nextjs_Learn/node_modules/.pnpm/lucide-react@0.265.0_react@18.2.0/node_modules/lucide-react/dist/cjs/icons/check'

@abdelhameedhamdy I’m a bit surprised with your issue, after seeing your Nextjs Config. But just found out that the NextJS repo hardcoded some modularize imports for the lucide-react package, which are outdated with the changes in lucide-react@0.264.0.

transform: {
        // Special aliases
  '(SortAsc|LucideSortAsc|SortAscIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/arrow-up-narrow-wide!lucide-react',
  '(SortDesc|LucideSortDesc|SortDescIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/arrow-down-wide-narrow!lucide-react',
  '(Verified|LucideVerified|VerifiedIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/badge-check!lucide-react',
  '(Slash|LucideSlash|SlashIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/ban!lucide-react',
  '(CurlyBraces|LucideCurlyBraces|CurlyBracesIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/braces!lucide-react',
  '(CircleSlashed|LucideCircleSlashed|CircleSlashedIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/circle-slash-2!lucide-react',
  '(SquareGantt|LucideSquareGantt|SquareGanttIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/gantt-chart-square!lucide-react',
  '(SquareKanbanDashed|LucideSquareKanbanDashed|SquareKanbanDashedIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/kanban-square-dashed!lucide-react',
  '(SquareKanban|LucideSquareKanban|SquareKanbanIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/kanban-square!lucide-react',
  '(Edit3|LucideEdit3|Edit3Icon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/pen-line!lucide-react',
  '(Edit|LucideEdit|EditIcon|PenBox|LucidePenBox|PenBoxIcon)':
    'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/pen-square!lucide-react',
  '(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',
  // 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',
  '*': 'modularize-import-loader?name={{ member }}&from=default&as=default&join=./icons/{{ kebabCase member }}!lucide-react',
},

See: https://github.com/vercel/next.js/blob/5ea372d6421614bfa10cc81ca5b3e71d8c06cf27/packages/next/src/server/config.ts#L686

So we need to update this list, but I’m not sure if this hardcoding is the best way if I’m honest. Some icons can be renamed and aliased. It is likely that this issue will happen again in the future.

If I import directly from the esm modules, I don’t get the error:

import { Menu } from "lucide-react/dist/esm/lucide-react";

"lucide-react": "^0.264.0",
"next": "13.4.13",

same here, seems to happen with all icons on next 13.4.12 too, downgrade to 0.263.1 works fine

I have just downgraded to 0.263.1, and it works for now.

error with 0.264.0 next 13.4.13

• error ./node_modules/lucide-react/dist/cjs/lucide-react.js:2:0 Module not found: Can’t resolve ‘/Users/abdelhameed/DevApps/vercel/my-app-shadcn/node_modules/lucide-react/dist/cjs/icons/chevron-left’

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

Import trace for requested module: ./components/ui/calendar.tsx ./app/page.tsx

next.config:

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

Created a fix: https://github.com/vercel/next.js/pull/53697

I am currently facing this issue with Next.js 13.4.13 and lucide-react version 0.264.0

• error ./node_modules/lucide-react/dist/cjs/lucide-react.js:2:0 Module not found: Can’t resolve ‘D:\grafbash_fullstack\node_modules\lucide-react\dist\cjs\icons\camera’

My workaround: Downgraded lucide react to version 0.263.1 and it is working like expected.

+1

Packages version

next: "^13.4.13" lucide-ract : "^0.265.0"

Getting Error while importing Icons

• Icons.tsx

import { PackageCheck, PackageMinus, type LucideIcon } from 'lucide-react';


export type Icon = LucideIcon


export const Icons = {
    logo: PackageMinus
}

• MainNav.tsx

"use client"
import Link from "next/link";
import { useSelectedLayoutSegment } from "next/navigation"
import { useState } from "react";
import { Icons } from "@/components/Icons";

interface MainNavProps {


}

export function MainNav() {
    const segment = useSelectedLayoutSegment()
    const [mobileMenu, setMobileMenu] = useState<boolean>(false)

    return (
        <div className="flex gap-6 md:gap-10">
            <Link href="/" className="hidden items-center space-x-2 md:flex">
                <Icons.logo />
            </Link>
        </div >
    )
}

Error :

Module not found: Can't resolve '/Users/sonu/Projects/NextJS/memoir/node_modules/lucide-react/dist/cjs/icons/package-minus'

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

Import trace for requested module:
./components/Icons.tsx
./components/MainNav.tsx

Downgrading lucide-react to 0.263.1 is working.

It will also break Sanity live previews and Serverless functions on Vercel.

Seems like v0.264.0 and above are causing import problems.

Adding my voice here. I would have never known the sweet spot is 0.263.1 without this discussion thread.

We should just generate those aliases as ./icons/{alias}.js files, then we don’t need your workaround @shuding and we can drop #53483

- export { default as LucideSparkles, default as LucideStars, default as Sparkles, default as SparklesIcon, default as Stars, + default as StarsIcon } from './icons/sparkles.js';
+ export { default as LucideSparkles, default as Sparkles } from './icons/sparkles.js';
+ export { default as LucideStars, default as Stars } from './icons/stars.js';
+++ ./icons/stars.js
+ export { default } from "./sparkels.js"

same for me here the list of icons not found:

lucide-react: ^0.264.0 Next.js (v13.4.13)

• arrow-right
• alert-triangle
• alert-circle