Import bug in Next.js (v13.4.13)

[gregberge]

Prerequisites

• Version: 0.264.0
• Are you running from source/main: nop
• Are you using a released build: nop
• Operating system: Mac OS
• Bits: -

Step to reproduce

Import icon in a Next.js v13.4.13 (latest)

Actual behavior

I see an error when importing the icon.

Any message or error

Attempted import error: 'modularize-import-loader?name=CalendarDays&from=default&as=default&join=./icons/calendar-days!lucide-react' does not contain a default export (imported as 'CalendarDays').

---

It works well on v0.263.x, I suspect a bug in the new ESM export.

[ericfennis]

@gregberge Can you post your nextjs config?

[abdelhameedhamdy]

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

[Jordaneisenburger]

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

[spencer5051]

Just went to ncu --upgrade and I saw the issue occur when upgrading from / to the following versions.

lucide-react ^0.263.1 → ^0.264.0

[nbahadori143]

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

[desiboli]

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

[jupcan]

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

[nbahadori143]

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

[ericfennis]

@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 [email protected].

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.

[jacobawebb]

As of writing, options to get around this are:

• Wait for Vercel to update the hardcoded list which shouldn't be hardcoded
• Downgrade Lucide Icons

Is this right @ericfennis?

[jacobawebb]

This is a Vercel issue, not a lucide issue.
Vercel's expecting static exports per icon instead of doing it using the output of https://github.com/lucide-icons/lucide/blob/main/tools/build-icons/building/generateDynamicImports.mjs
e.g.

export { default as ArrowUpNarrowWide } from './dist/esm/icons/arrow-up-narrow-wide.js';

But this would increase bundle size and load time which is a no brainer to avoid.

[jguddas]

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"

[shuding]

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

[trace2798]

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.

[imCorfitz]

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

[ericfennis]

As of writing, options to get around this are:

• Wait for Vercel to update the hardcoded list which shouldn't be hardcoded
• Downgrade Lucide Icons

@jacobawebb Yes I think so.
I hoped it was possible to override the default config, but that's also not possible 😞

[ericfennis]

Created a fix: vercel/next.js#53697

[juliusmarminge]

Created a fix: vercel/next.js#53697

That fix will break earlier versions of lucide-react though, won't it?

IMO this hard coded list of overrides is a mess for anyone to maintain...

For example, I was just upgrading to [email protected] when using [email protected] and things broke. I then tried upgrading to latest lucide, 0.265.0 and things still broke. Came here and found that allegedly 0.263.1 works, so I tried that and it worked. As you can tell, this is a mess and won't hold in the long run if the exports aren't predictable and stable...

@jguddas plan to add these in lucide seems more stable than maintaining a list in next that works for specific lucide versions

[theDanielJLewis]

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

[KingBael09]

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

[ericfennis]

@juliusmarminge Only 3 versions won't work with these changes (v0.262.0, v0.263.0, v0.263.1).
The solution from @jguddas is the best solution for the "aliases" imports problem, but still: the path is not correct because the "exports" property is removed in version 0.264.0, that caused some other problems see #1446

[LoyallAmsterdam]

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

[0xsonu]

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.

[Kvintus]

+1

[ericfennis]

PR vercel/next.js#53697 got merged and will be available in canary versions first.

[jacobawebb]

PR vercel/next.js#53697 got merged and will be available in canary versions first.

@ericfennis I feel like this thread makes people aware of the issue, how to currently get around it and how it's going to be solved going forward. Time to close? 🎉

[ericfennis]

@jacobawebb I was thinking to wait for the next canary release. Until then this issue is still active with current NextJS versions.

[NandiyaLive]

@ericfennis How can I deploy a project that has this error?

[KingBael09]

@ericfennis How can I deploy a project that has this error?

For now downgrade lucide-react to 0.263.1

pnpm add [email protected]

[NandiyaLive]

@ericfennis How can I deploy a project that has this error?

For now downgrade lucide-react to 0.263.1

pnpm add [email protected]

I've done that but it still give the error on Vercel

[KevinYouu]

Same problem

next: 13.4.13
lucide-react: 0.265.0

- error ./node_modules/.pnpm/[email protected][email protected]/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/[email protected][email protected]/node_modules/lucide-react/dist/cjs/icons/check'

[arsnl]

@ericfennis How can I deploy a project that has this error?

For now downgrade lucide-react to 0.263.1

pnpm add [email protected]

I've done that but it still give the error on Vercel

@NandiyaLive, you probably just let the ^ in your package.json. Make sure your dependencie for lucide-react is exactly like this.

"lucide-react": "0.263.1",

Even when you specify the version with npm/pnpm/yarn on the install command, and even if you add the -save-exact, if your previous package version have a ^, it gonna keep it.

[ericfennis]

This issue will be resolved in next version of NextJS
Please wait for the next release … or downgrade to lucide-react version 0.263.1 using
pnpm add [email protected]
If you are still having issues, we are happy to help over at https://discord.gg/EH6nSts.

[ericfennis]

🎉 [email protected] is released with the updated import map.