Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 #2569

Open
guillempuche opened this issue Apr 22, 2024 · 9 comments

Comments

@guillempuche
Copy link

guillempuche commented Apr 22, 2024

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:

image

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
@guillempuche guillempuche changed the title Vite web error on initializing Error in Tamagui parse, skipping package.json not found in path Error: package.json not found in path 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 Apr 22, 2024
@ehxxn
Copy link
Member

ehxxn commented Apr 24, 2024

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?

@guillempuche
Copy link
Author

guillempuche commented Apr 24, 2024

What package in node_modules are you looking to find module?

image

@jsve
Copy link

jsve commented Apr 29, 2024

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).

@itsmelion
Copy link

Yea.. i think community deserve a better way to comprehend the setup in Monorepos and in NX especifically.

@guillempuche
Copy link
Author

@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 nrwl/nx#22631, you can comment it to increase the priority 😉).

@itsmelion
Copy link

Actually i just put a "empty" package.json there and were all good.

@guillempuche
Copy link
Author

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.

@CoSNaYe
Copy link

CoSNaYe commented May 19, 2024

@guillempuche thank you for opening this issue and your starter repo helps me a lot 🙏

@guillempuche
Copy link
Author

@CoSNaYe very much appreciated!
This can also help you guillempuche/nx-expo-next-tamagui#2 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants