Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
5 of 30 tasks
AliceYuuuuuu opened this issue Aug 21, 2024 · 3 comments
Labels
🐛 bug Something isn't working

Comments

@AliceYuuuuuu
Copy link

Package

  • lucide
  • lucide-angular
  • lucide-flutter
  • lucide-preact
  • lucide-react
  • lucide-react-native
  • lucide-solid
  • lucide-svelte
  • lucide-vue
  • lucide-vue-next
  • Figma plugin
  • source/main
  • other/not relevant

Version

0.429.0

Can you reproduce this in the latest version?

  • Yes
  • No

Browser

  • Chrome/Chromium
  • Firefox
  • Safari
  • Edge
  • iOS Safari
  • Opera
  • Other/not relevant

Operating system

  • Windows
  • Linux
  • macOS
  • ChromeOS
  • iOS
  • Android
  • Other/not relevant

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

  • I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
@AliceYuuuuuu AliceYuuuuuu added the 🐛 bug Something isn't working label Aug 21, 2024
@benjick
Copy link
Contributor

benjick commented Sep 20, 2024

Same issue, did you manage to solve this?

@Electronica-dev
Copy link

Electronica-dev commented Sep 26, 2024

Importing icons directly from node_modules worked for me: import { ChartGantt } from "../../../node_modules/lucide-react".

Using "lucide-react": "^0.445.0" and "next": "14.2.3"

@theshadowagent
Copy link

Same issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants