Next.js Discord

Discord Forum

Build Failing in Next 14 due to Lucide related issue.

Answered
Oriental chestnut gall wasp posted this in #help-forum
Open in Discord
Oriental chestnut gall waspOP
Making a new post cause I accidentally marked the old as resolved

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>
  ),
};


My commit that seemingly broke it is rather large, but doesn't update my icons at all. The purpose of the commit was to add pusher websocket integration to my app (I've attached an image)

I tried adding "use client" to the top of icons.tsx like was shown in https://github.com/vercel/next.js/issues/58756 but that causes other issues due to the sub components of the Icon component, so it's not a valid solution and it was working fine before as a server component and works in dev.

Any help would be greatly appreciated
Answered by Oriental chestnut gall wasp
Update: I solved it, but have no idea why it was breaking. I was using this helper function for my pusher keys
export function toPusherKey(key: string) {
  return key.replace(/:/g, "__");
}

and removing it and just changing the name of the keys to use "__" by default fixed it. If anyone knows why that would have been breaking I would be interested to know.
View full answer

2 Replies

Oriental chestnut gall waspOP
commit image
Oriental chestnut gall waspOP
Update: I solved it, but have no idea why it was breaking. I was using this helper function for my pusher keys
export function toPusherKey(key: string) {
  return key.replace(/:/g, "__");
}

and removing it and just changing the name of the keys to use "__" by default fixed it. If anyone knows why that would have been breaking I would be interested to know.
Answer