lucide-icons / lucide

Beautiful & consistent icon toolkit made by the community. Open-source project and a fork of Feather Icons.
https://lucide.dev
ISC License
10.43k stars 473 forks source link

Getting Attempted import error: [icon] is not exported when using Next.js in a Turborepo application #2394

Open AliceYuuuuuu opened 1 month ago

AliceYuuuuuu commented 1 month ago

Package

Version

0.429.0

Can you reproduce this in the latest version?

Browser

Operating system

Description

Howdy y'all!

When using the latest versions of Next.js in a Turborepo application, I'm encountering the following errors for random icons:

'use client'
import { SendHorizontal, Check, Clock, LoaderCircle } from "lucide-react";

<LoaderCircle className="animate-spin-slow h-12 w-12 self-center justify-self-center text-black" />

Attempted import error: 'LoaderCircle' is not exported from '__barrel_optimize__?names=Check,Clock,LoaderCircle,SendHorizontal!=!lucide-react' (imported as 'LoaderCircle').
'use client';
import { ChevronRight, LifeBuoyIcon, Info, CircleHelp } from "lucide-react";

 Attempted import error: 'CircleHelp' is not exported from '__barrel_optimize__?names=ChevronRight,CircleHelp,Info,LifeBuoyIcon!=!lucide-react' (imported as 'CircleHelp').

Interestingly enough, the icons still render fine in the browser despite the errors.

image

Steps to reproduce

  1. Create a turborepo using turbo 2.0.14
  2. Create a Next.js app using "next": "14.2.5" and "lucide-react": "^0.429.0"
  3. In a component with use client, try importing and using the CircleHelp icon
  4. The error should show up in the Next.js console but the icon renders properly

Checklist

benjick commented 4 days ago

Same issue, did you manage to solve this?