Error [ERR_UNSUPPORTED_DIR_IMPORT] when running nx run next:serve:development

[jakejdavis]

On a clean install using Node v22.2.0 (Yarn Berry), I encountered the following Error [ERR_UNSUPPORTED_DIR_IMPORT] while resolving ES modules in /node_modules/@tamagui/next-plugin/dist/esm/withTamagui.mjs:

> nx run next:serve:development

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

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/nx-expo-next-tamagui-main/node_modules/next/dist/build/webpack/config/blocks/css' is not supported resolving ES modules imported from /nx-expo-next-tamagui-main/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:254:11)
    at moduleResolve (node:internal/modules/esm/resolve:920:10)
    at defaultResolve (node:internal/modules/esm/resolve:1119:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:542:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:511:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:241:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:126:49) {
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',
  url: 'file:///nx-expo-next-tamagui-main/node_modules/next/dist/build/webpack/config/blocks/css'
}

Node.js v22.2.0

[jakejdavis]

I was able to fix the error by using CommonJS imports & exports and renaming next.config.mjs to next.config.js

[guillempuche]

It's a Tamagui problem. I opened an issue tamagui/tamagui#2568.

Great you found a solution not using ESM.

[guillempuche]

I added your solution to the README

[jakejdavis]

Hi, not sure if this is related but after using CommonJS imports & exports, I'm now getting:

✘ [ERROR] Could not resolve "@nx-expo-next-tamagui/components"

    tamagui.config.ts:4:7:
      4 │ } from '@nx-expo-next-tamagui/components'
        ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@nx-expo-next-tamagui/components" as external to exclude it from the
  bundle, which will remove this error and leave the unresolved path in the bundle.

Error bundling tamagui config: Cannot find module '@nx-expo-next-tamagui/components'
Require stack:
- {{path_to_project}}/node_modules/tamagui-loader/node_modules/@tamagui/static/dist/cjs/extractor/loadTamagui.js
- {{path_to_project}}/node_modules/tamagui-loader/node_modules/@tamagui/static/dist/cjs/extractor/createExtractor.js
- {{path_to_project}}/node_modules/tamagui-loader/node_modules/@tamagui/static/dist/cjs/index.js
- {{path_to_project}}/node_modules/tamagui-loader/dist/cjs/TamaguiPlugin.js
- {{path_to_project}}/node_modules/tamagui-loader/dist/cjs/index.js
- {{path_to_project}}/node_modules/@tamagui/next-plugin/dist/cjs/withTamagui.js
- {{path_to_project}}/node_modules/@tamagui/next-plugin/dist/cjs/index.js
- {{path_to_project}}/apps/next/next.config.js (run with DEBUG=tamagui to see stack)
No bundled config generated, maybe an error in bundling. Set DEBUG=tamagui and re-run to get logs.
No bundled config generated, maybe an error in bundling. Set DEBUG=tamagui and re-run to get logs.
Tamagui Webpack Loader Error:
   Must provide components
Error: Must provide components
    at parseWithConfig ({{path_to_project}}/node_modules/tamagui-loader/node_modules/@tamagui/static/dist/cjs/extractor/createExtractor.js:130:13)
    at Object.parse ({{path_to_project}}/node_modules/tamagui-loader/node_modules/@tamagui/static/dist/cjs/extractor/createExtractor.js:91:14)
    at async extractToClassNames ({{path_to_project}}/node_modules/tamagui-loader/node_modules/@tamagui/static/dist/cjs/extractor/extractToClassNames.js:64:15)
    at async Object.loader ({{path_to_project}}/node_modules/tamagui-loader/dist/cjs/loader.js:56:73)

The page does compile and load, however I am worried it may affect Tamagui compilation. Do you have any suggestions on how to fix this, or any other solutions for getting ESM to work?

Thanks :)

[guillempuche]

Thanks for let me know.

CommonJS because of next.config.js instead of .mjs? Try .mjs.

I've not worked with NextJS building. Open to your PR 🙂

My TODOs for June-July:

• Build the Expo app on Android and iOS: expo-build-properties doesn't set up Gradle properties and iOS doesn't build the app nrwl/nx#26572, @nx/expo executor sync-deps add more dependencies than necessary nrwl/nx#26571
• Build React Vite