`@tamagui/next-plugin` 1.94.5 causes `ERR_UNSUPPORTED_DIR_IMPORT` in a Nx monorepo #2568

guillempuche · 2024-04-22T16:22:40Z

Current Behavior

After updating Tamagui from v1.89.18 to v1.94.5, the Next app doesn't start.

Expo app works.

It's something about ESM.

yarn exec nx run next:serve                                                                                                     1 ↵

> nx run next:serve:development

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/guillem/programacio/codi/cites/nx-expo-next-tamagui/node_modules/next/dist/build/webpack/config/blocks/css' is not supported resolving ES modules imported from /Users/guillem/programacio/codi/cites/nx-expo-next-tamagui/node_modules/@tamagui/next-plugin/dist/esm/withTamagui.mjs
Did you mean to import next-tamagui/node_modules/next/dist/build/webpack/config/blocks/css/index.js?
    at finalizeResolution (node:internal/modules/esm/resolve:258:11)
    at moduleResolve (node:internal/modules/esm/resolve:917:10)
    at defaultResolve (node:internal/modules/esm/resolve:1130:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:396:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:365:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:240:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///Users/guillem/programacio/codi/cites/nx-expo-next-tamagui/node_modules/next/dist/build/webpack/config/blocks/css'
}

Node.js v20.11.0

 NX   Next.js app exited with code 1

Pass --verbose to see the stacktrace.

Expected Behavior

Start the Next app.

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 next:serve`
4. 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

The text was updated successfully, but these errors were encountered:

ehxxn · 2024-04-22T16:35:46Z

try type: "module" in your package.json

guillempuche · 2024-04-22T16:41:54Z

NextJS apps don't have package.json in Nx out of the box.

guillempuche · 2024-04-22T16:44:21Z

In the project.json of the NextJS app you can configure this https://nx.dev/nx-api/next/executors/server

ehxxn · 2024-04-22T18:29:58Z

ok does that helped?

guillempuche · 2024-04-22T18:39:53Z

No. There aren't options to define the module in Nx Next plugin in project.json.

And I also tried to add a simple package.json that Nx supports (https://nx.dev/reference/project-configuration#including-packagejson-files-as-projects-in-the-graph) to the Vite web and nothing

{
	"name": "name",
	"version": "0.0.0",
	"private": true,
	"type": "module"
}

New Nx projects don't come with package.json by default.

guillempuche · 2024-04-22T18:47:37Z

I think Nx doesn't need package.json files because it takes the Typescript project settings from tsconfig.json (https://github.com/guillempuche/nx-expo-next-tamagui/blob/main/apps/next/tsconfig.json#L22C13-L22C13)

tamagutchi · 2024-04-29T00:59:26Z

+1 here; I added "type": "module" package.json of NextJS app, but same outcome (I am using next.config.mjs:

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/username/Projects/app/node_modules/next/dist/build/webpack/config/blocks/css' is not supported resolving ES modules imported from /Users/username/Projects/app/node_modules/@tamagui/next-plugin/dist/esm/withTamagui.mjs
Did you mean to import next/dist/build/webpack/config/blocks/css/index.js

Edit: Everything is working fine up to v1.94.2 (v1.94.1 is the last one that works as it should without any config changes).

Rapti · 2024-05-13T20:06:33Z

I also have this problem with version 1.98.0. I'm trying tamagui for the first time and adding it to an existing next.js project. I installed @tamagui/next-plugin and changed next.config.mjs as described in the guide. Now, when I try to start the app, I get this:

> next dev

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/path/to/project/node_modules/next/dist/build/webpack/config/blocks/css' is not supported resolving ES modules imported from /path/to/project/node_modules/@tamagui/next-plugin/dist/esm/withTamagui.mjs
Did you mean to import "next/dist/build/webpack/config/blocks/css/index.js"?
    at finalizeResolution (node:internal/modules/esm/resolve:259:11)
    at moduleResolve (node:internal/modules/esm/resolve:933:10)
    at defaultResolve (node:internal/modules/esm/resolve:1157:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:227:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:87:39)
    at link (node:internal/modules/esm/module_job:86:36) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///path/to/project/node_modules/next/dist/build/webpack/config/blocks/css'
}

Node.js v20.13.0

Process finished with exit code 1

Adding "type": "module", to package.json didn't help, but going back to 1.94.1 did.

natew · 2024-05-15T23:30:37Z

Hm so you shouldn't actually need mjs I need to check with the dev who changed those docs..

tamagutchi · 2024-05-16T08:33:45Z

Hm so you shouldn't actually need mjs I need to check with the dev who changed those docs..

I do need to use it due to https://plaiceholder.co/docs/plugins/next

guillempuche · 2024-05-16T09:44:12Z

JS community is moving everything to ESM. Then all config files also should be in the same age.

guillempuche changed the title ~~@tamagui/next-plugin cause ERR_UNSUPPORTED_DIR_IMPORT in a Nx monorepo~~ @tamagui/next-plugin 1.94.5 causes ERR_UNSUPPORTED_DIR_IMPORT in a Nx monorepo Apr 22, 2024

guillempuche mentioned this issue May 27, 2024

Error [ERR_UNSUPPORTED_DIR_IMPORT] when running nx run next:serve:development guillempuche/nx-expo-next-tamagui#4

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`@tamagui/next-plugin` 1.94.5 causes `ERR_UNSUPPORTED_DIR_IMPORT` in a Nx monorepo #2568

`@tamagui/next-plugin` 1.94.5 causes `ERR_UNSUPPORTED_DIR_IMPORT` in a Nx monorepo #2568

guillempuche commented Apr 22, 2024

ehxxn commented Apr 22, 2024

guillempuche commented Apr 22, 2024

guillempuche commented Apr 22, 2024

ehxxn commented Apr 22, 2024

guillempuche commented Apr 22, 2024 •

edited

guillempuche commented Apr 22, 2024

tamagutchi commented Apr 29, 2024 •

edited

Rapti commented May 13, 2024

natew commented May 15, 2024

tamagutchi commented May 16, 2024

guillempuche commented May 16, 2024

@tamagui/next-plugin 1.94.5 causes ERR_UNSUPPORTED_DIR_IMPORT in a Nx monorepo #2568

@tamagui/next-plugin 1.94.5 causes ERR_UNSUPPORTED_DIR_IMPORT in a Nx monorepo #2568

Comments

guillempuche commented Apr 22, 2024

Current Behavior

Expected Behavior

Tamagui Version

Platform (Web, iOS, Android)

Reproduction

System Info

ehxxn commented Apr 22, 2024

guillempuche commented Apr 22, 2024

guillempuche commented Apr 22, 2024

ehxxn commented Apr 22, 2024

guillempuche commented Apr 22, 2024 • edited

guillempuche commented Apr 22, 2024

tamagutchi commented Apr 29, 2024 • edited

Rapti commented May 13, 2024

natew commented May 15, 2024

tamagutchi commented May 16, 2024

guillempuche commented May 16, 2024

`@tamagui/next-plugin` 1.94.5 causes `ERR_UNSUPPORTED_DIR_IMPORT` in a Nx monorepo #2568

`@tamagui/next-plugin` 1.94.5 causes `ERR_UNSUPPORTED_DIR_IMPORT` in a Nx monorepo #2568

guillempuche commented Apr 22, 2024 •

edited

tamagutchi commented Apr 29, 2024 •

edited