tamagui / tamagui

Style React fast with 100% parity on React Native, an optional UI kit, and optimizing compiler.
https://tamagui.dev
MIT License
11.39k stars 484 forks source link

Next Build fails when using some Lucide Icons #2323

Open TomasSestak opened 8 months ago

TomasSestak commented 8 months ago

Current Behavior

When using icon like:

import { FileAxis3d } from '@tamagui/lucide-icons'

and running next build I get this error:

Module not found: Can't resolve '@tamagui/lucide-icons/dist/esm/icons/file-axis-3-d'

The file of the icon is file-axis-3d so there is added dash somewhere along the way

Expected Behavior

No response

Tamagui Version

^1.90.6

Platform (Web, iOS, Android)

Web

Reproduction

just use icon `import { FileAxis3d } from '@tamagui/lucide-icons'`

and run next build or try to deploy to vercel

System Info

No response

MantasMikal commented 8 months ago

Same with ArrowDownAZ

natew commented 8 months ago

We need to fix the naming to match the transform we use for next.js in our next plugin:

 nextConfig.modularizeImports['@tamagui/lucide-icons'] = {
            transform: `@tamagui/lucide-icons/dist/esm/icons/{{kebabCase member}}`,
            skipDefaultConversion: true,
          }

You can overwrite this ^ if you want to fix it temporarily, but note that if you import lucide icons without this it'll bring the whole package 💀

ditorahard commented 2 months ago

Any update on this?

NathanFrank285 commented 1 month ago

Any update on this?

obonakdar2 commented 1 day ago

I've got this error when using lucide icons, tamagui v 1.112.0

Build Error Failed to compile

../../node_modules/@react-native/assets-registry/registry.js Module parse failed: Unexpected token (13:7) 'use strict';

export type PackagerAsset = { | +__packager_asset: boolean, | +fileSystemLocation: string,

Import trace for requested module: ../../node_modules/@react-native/assets-registry/registry.js ../../node_modules/react-native-svg/lib/module/lib/resolveAssetUri.js ../../node_modules/react-native-svg/lib/module/web/utils/prepare.js ../../node_modules/react-native-svg/lib/module/web/WebShape.js ../../node_modules/react-native-svg/lib/module/elements.web.js ../../node_modules/react-native-svg/lib/module/ReactNativeSVG.web.js ../../node_modules/react-native-svg/lib/module/index.js ../../node_modules/@tamagui/lucide-icons/dist/esm/icons/map.js ../../packages/app/src/features/explore/screen.tsx