tamagui
tamagui copied to clipboard
Published
20 hours ago •
tamagui
tamagui
Vite web error on initializing `Error in Tamagui parse, skipping package.json not found in path Error: package.json not found in path` in a Nx monorepo
Current Behavior
Error Error in Tamagui parse, skipping package.json not found in path Error: package.json not found in path, something with @tamagui/static package, specifically here https://github.com/tamagui/tamagui/blob/master/packages/static/src/extractor/extractHelpers.ts.
Nx can work without package.json in the local packages and apps (except for the Expo app)
The Expo app works well.
My Vite config in apps/web-react/vite.config.ts
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'
import { tamaguiExtractPlugin, tamaguiPlugin } from '@tamagui/vite-plugin'
import react from '@vitejs/plugin-react'
/// <reference types='vitest' />
import { defineConfig } from 'vite'
import tamaguiComponentsConfig from './src/tamagui.config'
export default defineConfig(({ mode }) => ({
root: __dirname,
cacheDir: '../../node_modules/.vite/apps/web-react',
server: {
port: 4200,
host: 'localhost',
},
preview: {
port: 4300,
host: 'localhost',
},
plugins: [
nxViteTsPaths(),
react({
// For React and Tamagui
babel: {
plugins: [
[
'@tamagui/babel-plugin',
{
config: './src/tamagui.config.ts',
components: [
'@nx-expo-next-tamagui/app/provider',
'@nx-expo-next-tamagui/app/benefits',
'@nx-expo-next-tamagui/app/resources',
'@nx-expo-next-tamagui/app/welcome',
'@nx-expo-next-tamagui/components',
'tamagui',
],
logTimings: true,
},
],
],
},
}),
// For Tamagui
tamaguiPlugin({ config: './src/tamagui.config' }),
// Adds the optimizing compiler
mode === 'production'
? tamaguiExtractPlugin({ config: './src/tamagui.config' })
: null,
],
// Uncomment this if you are using workers.
// worker: {
// plugins: [ nxViteTsPaths() ],
// },
build: {
outDir: '../../dist/apps/web-react',
reportCompressedSize: true,
commonjsOptions: {
transformMixedEsModules: true,
},
},
define: {
'import.meta.vitest': undefined,
},
test: {
globals: true,
cache: {
dir: '../../node_modules/.vitest',
},
environment: 'jsdom',
include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
includeSource: ['src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
reporters: ['default'],
coverage: {
reportsDirectory: '../../coverage/apps/web-react',
provider: 'v8',
},
},
}))
This is the output of the terminal:
Error in Tamagui parse, skipping package.json not found in path Error: package.json not found in path
at findRoot (/Users/guillem/programacio/codi/cites/xiroi/node_modules/find-root/index.js:19:11)
at findRoot (/Users/guillem/programacio/codi/cites/xiroi/node_modules/find-root/index.js:28:10)
at findRoot (/Users/guillem/programacio/codi/cites/xiroi/node_modules/find-root/index.js:28:10)
at findRoot (/Users/guillem/programacio/codi/cites/xiroi/node_modules/find-root/index.js:28:10)
at /Users/guillem/programacio/codi/cites/xiroi/node_modules/@tamagui/static/dist/cjs/extractor/extractHelpers.js:110:45
at Array.flatMap (<anonymous>)
at /Users/guillem/programacio/codi/cites/xiroi/node_modules/@tamagui/static/dist/cjs/extractor/extractHelpers.js:109:422
at memoized (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@tamagui/static/dist/cjs/helpers/memoize.js:27:25)
at isComponentPackage (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@tamagui/static/dist/cjs/extractor/extractHelpers.js:85:174)
at isValidModule (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@tamagui/static/dist/cjs/extractor/extractHelpers.js:104:70)
at isValidImport (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@tamagui/static/dist/cjs/extractor/extractHelpers.js:109:127)
at parseWithConfig (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@tamagui/static/dist/cjs/extractor/createExtractor.js:183:147)
at Object.parseSync (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@tamagui/static/dist/cjs/extractor/createExtractor.js:87:14)
at PluginPass.enter (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@tamagui/babel-plugin/dist/cjs/index.js:78:29)
at newFn (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@babel/traverse/lib/visitors.js:160:14)
at NodePath._call (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@babel/traverse/lib/path/context.js:46:20)
at NodePath.call (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@babel/traverse/lib/path/context.js:36:17)
at NodePath.visit (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@babel/traverse/lib/path/context.js:82:31)
at TraversalContext.visitQueue (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@babel/traverse/lib/context.js:89:16)
at TraversalContext.visitSingle (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@babel/traverse/lib/context.js:65:19)
at TraversalContext.visit (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@babel/traverse/lib/context.js:112:19)
at traverseNode (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
at traverse (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@babel/traverse/lib/index.js:52:34)
at transformFile (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@vitejs/plugin-react/node_modules/@babel/core/lib/transformation/index.js:82:31)
at transformFile.next (<anonymous>)
at run (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@vitejs/plugin-react/node_modules/@babel/core/lib/transformation/index.js:24:12)
at run.next (<anonymous>)
at transform (/Users/guillem/programacio/codi/cites/xiroi/node_modules/@vitejs/plugin-react/node_modules/@babel/core/lib/transform.js:22:33)
at transform.next (<anonymous>)
at step (/Users/guillem/programacio/codi/cites/xiroi/node_modules/gensync/index.js:261:32)
at /Users/guillem/programacio/codi/cites/xiroi/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/Users/guillem/programacio/codi/cites/xiroi/node_modules/gensync/index.js:223:11)
at /Users/guillem/programacio/codi/cites/xiroi/node_modules/gensync/index.js:189:28
at /Users/guillem/programacio/codi/cites/xiroi/node_modules/@vitejs/plugin-react/node_modules/@babel/core/lib/gensync-utils/async.js:67:7
at /Users/guillem/programacio/codi/cites/xiroi/node_modules/gensync/index.js:113:33
at step (/Users/guillem/programacio/codi/cites/xiroi/node_modules/gensync/index.js:287:14)
at /Users/guillem/programacio/codi/cites/xiroi/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/Users/guillem/programacio/codi/cites/xiroi/node_modules/gensync/index.js:223:11)
And my browser console:
Expected Behavior
Run the Vite React web.
Tamagui Version
1.94.5
Platform (Web, iOS, Android)
Web
Reproduction
1. Clone project https://github.com/guillempuche/nx-expo-next-tamagui/
2. yarn install
3. yarn exec nx run web-react:serve
4. Open http://localhost:4200/ on a browser tab
5. You get the error
System Info
System:
OS: macOS 14.4.1
CPU: (8) arm64 Apple M1
Memory: 59.48 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 - ~/Library/pnpm/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.60
Edge: 124.0.2478.51
Safari: 17.4.1
npmPackages:
@biomejs/biome: ^1.7.0 => 1.7.0
@expo/cli: ~0.17.5 => 0.17.10
@expo/metro-config: ~0.17.4 => 0.17.7
@expo/metro-runtime: ~3.1.3 => 3.1.3
@nderscore/tamagui-typescript-plugin: ^0.6.0 => 0.6.0
@nx/expo: 18.3.2 => 18.3.2
@nx/jest: 18.3.2 => 18.3.2
@nx/js: 18.3.2 => 18.3.2
@nx/next: 18.3.2 => 18.3.2
@nx/react: 18.3.2 => 18.3.2
@nx/react-native: 18.3.2 => 18.3.2
@nx/storybook: 18.3.2 => 18.3.2
@nx/vite: 18.3.2 => 18.3.2
@nx/web: 18.3.2 => 18.3.2
@nx/workspace: 18.3.2 => 18.3.2
@react-native-async-storage/async-storage: 1.21.0 => 1.21.0
@react-native-masked-view/masked-view: 0.3.0 => 0.3.0
@react-navigation/bottom-tabs: ^6.5.11 => 6.5.20
@react-navigation/native: ^6.1.10 => 6.1.17
@storybook/addon-essentials: ^7.5.3 => 7.6.17
@storybook/core-server: ^7.5.3 => 7.6.17
@storybook/nextjs: ^7.5.3 => 7.6.17
@storybook/react: ^7.5.3 => 7.6.17
@storybook/react-native: ^7.6.15 => 7.6.18
@storybook/react-vite: ^7.5.3 => 7.6.17
@swc-node/register: 1.8.0 => 1.8.0
@swc/core: ~1.3.85 => 1.3.107
@swc/helpers: ~0.5.2 => 0.5.10
@tamagui/babel-plugin: ~1.94.5 => 1.94.5
@tamagui/build: ^1.94.5 => 1.94.5
@tamagui/cli: ^1.94.5 => 1.94.5
@tamagui/config: ^1.94.5 => 1.94.5
@tamagui/font-inter: ^1.94.5 => 1.94.5
@tamagui/linear-gradient: ^1.94.5 => 1.94.5
@tamagui/lucide-icons: ^1.94.5 => 1.94.5
@tamagui/next-plugin: ^1.94.5 => 1.94.5
@tamagui/next-theme: ^1.94.5 => 1.94.5
@tamagui/shorthands: ^1.94.5 => 1.94.5
@tamagui/theme-builder: ^1.94.5 => 1.94.5
@tamagui/themes: ^1.94.5 => 1.94.5
@tamagui/web: 1.94.5 => 1.94.5
@testing-library/jest-native: ~5.4.3 => 5.4.3
@testing-library/react: 14.0.0 => 14.0.0
@testing-library/react-native: 12.4.3 => 12.4.3
@types/jest: ^29.4.0 => 29.5.12
@types/node: 18.19.14 => 18.19.14
@types/react: ~18.2.45 => 18.2.79
@types/react-dom: 18.2.14 => 18.2.14
@vitejs/plugin-react: ^4.2.0 => 4.2.1
@vitest/coverage-v8: ^1.0.4 => 1.5.0
@vitest/ui: ^1.3.1 => 1.5.0
babel-preset-expo: 10.0.1 => 10.0.1
eas-cli: ~7.1.2 => 7.1.3
expo: ~50.0.6 => 50.0.17
expo-constants: ~15.4.5 => 15.4.6
expo-font: ~11.10.2 => 11.10.3
expo-linear-gradient: ~12.7.1 => 12.7.2
expo-linking: ~6.2.2 => 6.2.2
expo-router: ~3.4.7 => 3.4.8
expo-splash-screen: 0.26.4 => 0.26.4
expo-status-bar: 1.11.1 => 1.11.1
expo-web-browser: ~12.8.1 => 12.8.2
husky: ^9.0.10 => 9.0.11
jest: ^29.4.1 => 29.7.0
jest-environment-node: ^29.4.1 => 29.7.0
jsdom: ~22.1.0 => 22.1.0
lint-staged: ^15.2.2 => 15.2.2
next: ^14.1.0 => 14.2.2
next-compose-plugins: ^2.2.1 => 2.2.1
next-transpile-modules: ^10.0.1 => 10.0.1
nx: 18.3.2 => 18.3.2
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
react-native: 0.73.4 => 0.73.4
react-native-gesture-handler: 2.14.0 => 2.14.0
react-native-safe-area-context: 4.9.0 => 4.9.0
react-native-screens: 3.29.0 => 3.29.0
react-native-svg: 14.1.0 => 14.1.0
react-native-svg-transformer: 1.3.0 => 1.3.0
react-native-web: 0.19.10 => 0.19.10
react-router-dom: 6.11.2 => 6.11.2
react-test-renderer: 18.2.0 => 18.2.0
solito: ^4.2.0 => 4.2.2
storybook: ^7.5.3 => 7.6.17
tamagui: ^1.94.5 => 1.94.5
ts-node: 10.9.1 => 10.9.1
tslib: ^2.3.0 => 2.6.2
typescript: ^5.4.5 => 5.4.5
vite: ~5.2.2 => 5.2.10
vitest: ^1.3.1 => 1.5.0
inside createExtractor we use find-root that uses package.json as a way to find root of a module
I think maybe using node_modues is a better way to determine root of a module?
Some additional context for non-NX people. Depending on your setup, neither node_modules or package.json exist close to the nextjs/expo project. Both node_modules and package.json might be in the root, where the projects would be in /apps/next-js-project and /apps/expo-project/ respectivly.
Hope this helps any future work on this.
(I have the same issue btw).
Yea.. i think community deserve a better way to comprehend the setup in Monorepos and in NX especifically.
@itsmelion I'm creating a template that works https://github.com/guillempuche/nx-expo-next-tamagui, except for ViteJS web.
It still needs the Expo EAS build scripts to work with Yarn 4 (I opened an issue at https://github.com/nrwl/nx/issues/22631, you can comment it to increase the priority 😉).
Ohh fuck, yeah!!! Thanks Christhopher 🤜
I won't close the issue, because Tamagui repo should consider no package.json in Nx, because Nx doesn't create them by default.
@guillempuche thank you for opening this issue and your starter repo helps me a lot 🙏
@CoSNaYe very much appreciated! This can also help you https://github.com/guillempuche/nx-expo-next-tamagui/issues/2#issuecomment-2108091061