@tamagui/vite-plugin doesn't support Tamagui config file in child folders

[guillempuche]

Current Behavior

Tamagui Vite Plugin uses tamagui-extract to get Tamagui config file. But it cannot figure out how to get in a directory that isn't the same as vite.config.ts.

Example of vite.config.ts

export default defineConfig({
  clearScreen: false,
  plugins: [
    // tamaguiPlugin(tamaguiConfig),
    tamaguiPlugin({
      components: ['tamagui'],
      // config: './app/theme/tamagui.config.ts', // THROWS ERROR
      config: './tamagui.config.ts', // IT WORKS
      logTimings: true,
    }) as PluginOption,
    tamaguiExtractPlugin({
      logTimings: true,
    }),
    remix(),
    ...

Error:

23:07:59 [vite] Internal server error: Must provide components
  Plugin: tamagui-extract
  File: /Users/guillem/programacio/codi/cites/ui/appui/app/entry.server.tsx
      at parseWithConfig (/Users/guillem/programacio/codi/cites/ui/appui/node_modules/@tamagui/static/dist/cjs/extractor/createExtractor.js:130:13)
      at Object.parse (/Users/guillem/programacio/codi/cites/ui/appui/node_modules/@tamagui/static/dist/cjs/extractor/createExtractor.js:91:14)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.extractToClassNames (/Users/guillem/programacio/codi/cites/ui/appui/node_modules/@tamagui/static/dist/cjs/extractor/extractToClassNames.js:64:15)
      at async TransformContext.transform (file:///Users/guillem/programacio/codi/cites/ui/appui/node_modules/@tamagui/vite-plugin/dist/esm/extract.mjs:98:25)
      at async Object.transform (file:///Users/guillem/programacio/codi/cites/ui/appui/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:51133:30)
      at async loadAndTransform (file:///Users/guillem/programacio/codi/cites/ui/appui/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:53888:29)

My tamagui.config.ts

import { config, tokens } from '@tamagui/config/v3'
import { createTamagui, createTokens } from 'tamagui'

import { darkThemeColors, lightThemeColors, palette } from './app/theme/colors'

// for site responsive demo
Object.assign(config.media, {
  tiny: { maxWidth: 500 },
  gtTiny: { minWidth: 500 + 1 },
  small: { maxWidth: 620 },
  gtSmall: { minWidth: 620 + 1 },
  medium: { maxWidth: 780 },
  gtMedium: { minWidth: 780 + 1 },
  large: { maxWidth: 900 },
  gtLarge: { minWidth: 900 + 1 },
})

const tamaConf = createTamagui({
  ...config,
  themes: {
    light: lightThemeColors,
    dark: darkThemeColors,
  },
  tokens: createTokens({
    ...tokens,
    color: palette,
  }),
  themeClassNameOnRoot: true,
})

export type Conf = typeof tamaConf

declare module 'tamagui' {
  interface TamaguiCustomConfig extends Conf {}

  // interface TypeOverride {
  //   groupNames(): 'takeoutBody'
  // }
}

export default tamaConf

Expected Behavior

Compiles the Remix app with Vite.

Tamagui Version

1.95.1

Platform (Web, iOS, Android)

Web

Reproduction

1. Create a Remix web app with the Tamagui starter kit.
2. Move `tamagui.config.ts` inside `app` folder.
3. Run `npm run dev` or `yarn dev` and you get the error
4. Move back the config file to the root directory, run the web, error gone.

System Info

System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1
    Memory: 101.27 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 4.1.1 - ~/.nvm/versions/node/v20.9.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    Watchman: 2024.04.01.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 120.1.61.120
    Chrome: 124.0.6367.62
    Edge: 124.0.2478.51
    Safari: 17.4.1
  npmPackages:
    @biomejs/biome: ^1.7.1 => 1.7.1 
    @remix-run/dev: ^2.8.1 => 2.8.1 
    @remix-run/node: ^2.8.1 => 2.8.1 
    @remix-run/react: ^2.8.1 => 2.8.1 
    @remix-run/serve: ^2.8.1 => 2.8.1 
    @tamagui/config: ^1.95.1 => 1.95.1 
    @tamagui/helpers-icon: ^1.95.1 => 1.95.1 
    @tamagui/use-direction: 1.95.1 => 1.95.1 
    @tamagui/vite-plugin: ^1.95.1 => 1.95.1 
    @types/react: ^18.2.55 => 18.2.79 
    @types/react-dom: ^18.2.19 => 18.2.25 
    isbot: ^4.1.0 => 4.4.0 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-native-svg: ^15.2.0 => 15.2.0 
    tamagui: ^1.95.1 => 1.95.1 
    typescript: ^5.3.3 => 5.4.5 
    vite: ^5.2.6 => 5.2.10 
    vite-bundle-analyzer: ^0.9.2 => 0.9.4 
    vite-plugin-commonjs: ^0.10.1 => 0.10.1 
    vite-tsconfig-paths: ^4.3.2 => 4.3.2

[vstlouis]

Try this in your vite.config.ts @guillempuche

const monorepoRoot = path.resolve(__dirname, "..", "..");
const tamaguiConfigPath = path.resolve(
  monorepoRoot,
  "PUT_THE_PATH_HERE/app/theme/tamagui.config.ts",
);

// and in your plugin 👇🏿
tamaguiPlugin({
  config: tamaguiConfigPath,
  ..
}) as PluginOption,

[guillempuche]

I'm currently testing with a Remix app, not a monorepo. I used the starter kit npm create tamagui@latest to init the project.

Today I cannot open Remix with either config (root or child) @vstlouis .

Yesterday a similar thing happened to me, after stop, start, stop, star ViteJS, it finally opened the web with Tamagui config in the root directory.

I tried this

const tamaguiConfigPath = path.resolve(__dirname, 'app/theme/tamagui.config.ts')
...
 plugins: [
  ...
    tamaguiPlugin({
      components: ['tamagui'],
      // config: './app/theme/tamagui.config.ts',
      // config: './tamagui.config.ts',
      config: tamaguiConfigPath,

      logTimings: true,
    }) as PluginOption,
...

Now it doesn't work, neither do the directories. The @tamagui/vite-plugin and @tamagui/static/.../extractor directories have problems.

Error:

9:49:28 [vite] Internal server error: Must provide components
  Plugin: tamagui-extract
  File: /Users/guillem/programacio/codi/cites/ui/appui/app/entry.server.tsx
      at parseWithConfig (/Users/guillem/programacio/codi/cites/ui/appui/node_modules/@tamagui/static/dist/cjs/extractor/createExtractor.js:130:13)
      at Object.parse (/Users/guillem/programacio/codi/cites/ui/appui/node_modules/@tamagui/static/dist/cjs/extractor/createExtractor.js:91:14)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.extractToClassNames (/Users/guillem/programacio/codi/cites/ui/appui/node_modules/@tamagui/static/dist/cjs/extractor/extractToClassNames.js:64:15)
      at async TransformContext.transform (file:///Users/guillem/programacio/codi/cites/ui/appui/node_modules/@tamagui/vite-plugin/dist/esm/extract.mjs:98:25)
      at async Object.transform (file:///Users/guillem/programacio/codi/cites/ui/appui/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:51133:30)
      at async loadAndTransform (file:///Users/guillem/programacio/codi/cites/ui/appui/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:53888:29)