lucide icon indicating copy to clipboard operation
lucide copied to clipboard

SyntaxError: Unexpected token 'export'

Open d-string opened this issue 1 year ago • 2 comments

Package

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

Version

0.314.0

Browser

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

Operating system

  • [X] Windows
  • [ ] Linux
  • [ ] macOS
  • [ ] Other/not relevant

Description

i made some shared components for the internal library with turbo repo, after build and publish then we consume we got

SyntaxError: Unexpected token 'export' like this

Screenshot 2024-01-23 214300

import type { LucideProps } from "lucide-react";
import dynamicIconImports from "lucide-react/dynamicIconImports.js";
import { lazy, Suspense } from "react";

import { cn } from "../../utils";

interface IconProps extends Omit<LucideProps, "ref"> {
  name: keyof typeof dynamicIconImports;
}

export function Icon({
  className = "",
  name,
  ...props
}: IconProps): JSX.Element {
  const LucideIcon = lazy(dynamicIconImports[name]);

  return (
    <Suspense>
      <div className={cn("w-4 h-4", className)}>
        <LucideIcon className={cn("w-4 h-4", className)} {...props} />
      </div>
    </Suspense>
  );
}

Steps to reproduce

  1. create component Icon.tsx using turbo repo
import type { LucideProps } from "lucide-react";
import dynamicIconImports from "lucide-react/dynamicIconImports.js";
import { lazy, Suspense } from "react";

import { cn } from "../../utils";

interface IconProps extends Omit<LucideProps, "ref"> {
  name: keyof typeof dynamicIconImports;
}

export function Icon({
  className = "",
  name,
  ...props
}: IconProps): JSX.Element {
  const LucideIcon = lazy(dynamicIconImports[name]);

  return (
    <Suspense>
      <div className={cn("w-4 h-4", className)}>
        <LucideIcon className={cn("w-4 h-4", className)} {...props} />
      </div>
    </Suspense>
  );
}

  1. build and publish to npm
  2. consume the library
  3. then we got this Screenshot 2024-01-23 214300

Checklist

  • [X] 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.)

d-string avatar Jan 23 '24 14:01 d-string

Hey @xhttp-res have you managed to resolve that issue somehow?

Kozioleczek avatar Apr 19 '24 10:04 Kozioleczek

nope @Kozioleczek 😿

d-string avatar Apr 29 '24 02:04 d-string