Next.js Discord

Discord Forum

Build failing due to issue with lucide-react

Answered
Oriental chestnut gall wasp posted this in #help-forum
Open in Discord
Oriental chestnut gall waspOP
I am getting a strange error when I try to build my NextJS application that is using lucide-react for icons
Cannot get final name for export 'Plus' of __barrel_optimize__?names=Bold,Calendar,ChevronLeft,Code,Crown,Heading2,Italic,List,ListOrdered,Loader2,LogIn,LogOut,MapPin,Menu,MoreHorizontal,Pencil,Plus,Save,Send,Shield,ShieldOff,Strikethrough,Trash,Underline,User2,UserX,X!=!./node_modules/lucide-react/dist/esm/lucide-react.js

My build works fine on my main branch and I have not changed anything relating to my icons or changed the version of lucide or next.
Here is my icons.tsx file. It has not changed since the build was working.
import {
  LucideProps,
  X,
  Menu,
  MoreHorizontal,
  Loader2,
  ChevronLeft,
  ArrowRight,
  Bold,
  Strikethrough,
  Italic,
  Underline,
  Code,
  List,
  ListOrdered,
  Heading2,
  Save,
  Plus,
  Shield,
  ShieldOff,
  Crown,
  MessageCircle as Reply,
  Send as Submit,
  LogIn as SignIn,
  LogOut as SignOut,
  User2 as Account,
  Trash as Delete,
  Pencil as Edit,
  MapPin as Location,
  Calendar as Date,
  UserX as Kick,
  type Icon as LucideIcon,
} from "lucide-react";

export type Icon = LucideIcon;

export const Icons = {
  arrowRight: ArrowRight,
  reply: Reply,
  plus: Plus,
  spinner: Loader2,
  menu: Menu,
  close: X,
  signIn: SignIn,
  signOut: SignOut,
  account: Account,
  delete: Delete,
  edit: Edit,
  save: Save,
  submit: Submit,
  back: ChevronLeft,
  more: MoreHorizontal,
  bold: Bold,
  italic: Italic,
  underline: Underline,
  strikethrough: Strikethrough,
  code: Code,
  list: List,
  listOrdered: ListOrdered,
  heading: Heading2,
  location: Location,
  date: Date,
  shield: Shield,
  shieldOff: ShieldOff,
  crown: Crown,
  kick: Kick,
  logo: ({ ...props }: LucideProps) => (
    <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <path
        d="M62.4375 111.375C93.1929 111.375 118.125 86.4429 118.125 55.6875C118.125 24.9321 93.1929 0 62.4375 0C31.6821 0 6.75 24.9321 6.75 55.6875C6.75 86.4429 31.6821 111.375 62.4375 111.375Z"
        fill="currentColor"
      />
      <path
        d="M0 162.562C0 128.079 27.9542 100.125 62.4375 100.125C96.9208 100.125 124.875 128.079 124.875 162.562V225H0V162.562Z"
        fill="currentColor"
      />
      <path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M183.022 42.0739C172.613 34.3539 157.916 36.5342 150.196 46.9438L107.263 104.833C121.956 114.28 131.906 129.83 134.24 147.243L187.892 74.9004C195.612 64.4908 193.432 49.7939 183.022 42.0739Z"
        fill="currentColor"
      />
    </svg>
  ),
};

Any help would be greatly appreciated
Answered by Oriental chestnut gall wasp
Ok so apparently that post was very related because adding "use client" to the top of the icons.tsx page fixed the issue. I'm not sure why. It never had it before and I didn't change the file at all
View full answer

29 Replies

Oriental chestnut gall waspOP
I'm still unable to resolve this issue. I found this post but I'm not sure how it would be related.
https://github.com/vercel/next.js/issues/58756
Oriental chestnut gall waspOP
Ok so apparently that post was very related because adding "use client" to the top of the icons.tsx page fixed the issue. I'm not sure why. It never had it before and I didn't change the file at all
Answer
Oriental chestnut gall waspOP
nevermind
this is not a valid solution
it broke other things
Weird
Try clearing the build cache in vercel
And then redeploying
I use lucide icons too on vercel and your code looks correct
@linesofcode Try clearing the build cache in vercel
Oriental chestnut gall waspOP
The local build also fails
Not just vercel
And it used to work but stopped after my last PR
Try checking out a known working commit in git
Then delete .next folder and then delete node modules
Reinstall packages
Try to build again
Oriental chestnut gall waspOP
If it’s known working then wouldn’t it work?
Do you mean try that with the not working commit?
You said it’s worked before
The goal is to find the last commit where it worked
Meaning the commit after that was is the one that broke
Doing a git diff will then show you the changes
And you can narrow it down to a line of code that broke it
Oriental chestnut gall waspOP
Yeah I looked through the changes
There’s just a lot
And none of them are icon related
this commit was mainly to implement pusher websockets
Oriental chestnut gall waspOP
Still not entirely sure what is going here :/