Site crashes after using lucide icons with vite config from apps/vite

[SamuraiF0x]

Current Behavior

I tried using simple vite.config.ts from apps/vite which works until icons from LucideIcons are imported and used.

I get a lot of errors like this one:

[ERROR] Could not resolve "react-native-svg"

  node_modules/@tamagui/lucide-icons/dist/esm/icons/wind.mjs:2:26:
    2 │ import { Svg, Path } from "react-native-svg";

Adding yarn add react-native-svg gives many of these errors:

[ERROR] Could not resolve "react-native"

  node_modules/react-native-svg/lib/module/fabric/NativeSvgRenderableModule.js:4:36:
    4 │ import { TurboModuleRegistry } from 'react-native';

Adding tamagui.config.ts to root and the next config to vite.config.ts removes errors:

tamaguiPlugin({
  config: "tamagui.config.ts",
  components: ["tamagui"],
}),

Expected Behavior

LucideIcons shoudln't break site when using vite config from apps/vite.

So this should work:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  define: {
    'process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES': false,
  },
  plugins: [react()],
})

just as it works with this:

tamaguiPlugin({
  config: "tamagui.config.ts",
  components: ["tamagui"],
}),

Tamagui Version

"tamagui": "^1.93.2"

Platform (Web, iOS, Android)

Windows 11, Web, Vite

Reproduction

vite.config.ts from apps/vite:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  define: {
    'process.env.TAMAGUI_BAIL_AFTER_SCANNING_X_CSS_RULES': false,
  },
  plugins: [react()],
})

App.tsx:

import { config } from "@tamagui/config/v3";
import { TamaguiProvider, createTamagui } from "tamagui";
import { ExternalLink } from "@tamagui/lucide-icons";

// you usually export this from a tamagui.config.ts file
const tamaguiConfig = createTamagui(config);

// make TypeScript type everything based on your config
type Conf = typeof tamaguiConfig;
declare module "@tamagui/core" {
    interface TamaguiCustomConfig extends Conf {}
}

function App() {
	return (
		<TamaguiProvider config={tamaguiConfig}>
                      <ExternalLink />
		</TamaguiProvider>
	);
}

export default App;

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 2.93 GB / 15.93 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.22 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.5 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: 123.0.6312.86
    Edge: Chromium (122.0.2365.92)
  npmPackages:
    @tamagui/config: ^1.93.2 => 1.93.2 
    @tamagui/lucide-icons: ^1.93.2 => 1.93.2 
    @tamagui/vite-plugin: ^1.93.2 => 1.93.2 
    @types/react: ^18.2.66 => 18.2.72 
    @types/react-dom: ^18.2.22 => 18.2.22 
    @typescript-eslint/eslint-plugin: ^7.2.0 => 7.4.0 
    @typescript-eslint/parser: ^7.2.0 => 7.4.0
    @vitejs/plugin-react: ^4.2.1 => 4.2.1
    eslint: ^8.57.0 => 8.57.0
    eslint-plugin-react-hooks: ^4.6.0 => 4.6.0
    eslint-plugin-react-refresh: ^0.4.6 => 0.4.6
    prettier: ^3.2.5 => 3.2.5
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    tamagui: ^1.93.2 => 1.93.2
    typescript: ^5.2.2 => 5.4.3
    vite: ^5.2.0 => 5.2.6