Nextjs fails to detect ESM modules correctly when using exports in package.json

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
Binaries:
  Node: 16.16.0
  npm: 8.11.0
  Yarn: 1.22.15
  pnpm: 7.5.2
Relevant packages:
  next: 12.2.4
  eslint-config-next: 12.2.4
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Next.js fails to resolve sub dependencies correctly and tries to load CJS from ESM modules, causing the build to fail.

SyntaxError: Named export 'theme' not found. The requested module '@chakra-ui/react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

@chakra-ui/react a dependency of @saas-ui/react

Saas UI uses exports definition in package.json to define package entries and exports the ESM module as default.

{
  "exports": {
    ".": {
      "require": "./dist/index.js",
      "default": "./dist/index.modern.mjs"
    },
    "./src": {
      "default": "./src/index.ts"
    }
  },
  "main": "./dist/index.js",
  "module": "./dist/index.modern.mjs",
  "types": "./dist/index.d.ts"
}

Removing exports or changing default to import fixes the issue.

However I think Next.js should handle this correctly.

Expected Behavior

Next.js resolves all packages correctly as ESM.

Link to reproduction

https://github.com/msnegurski/test-saas-ui

To Reproduce

1. Clone the repo.
2. npm i
3. npm run dev

Make sure @saas-ui/react@1.2.x is installed (not 1.3)

[Pagebakers]

Ok, my bad I misread this yesterday.

Then we can agree using both ‘import’ and ‘require’ is the way to go, leaves us only with the question why the compiler behaves different with .js and .mjs file extensions for es modules.

[Pagebakers]

Thanks @balazsorban44

This issue is related to: https://github.com/chakra-ui/chakra-ui/issues/6436

Chakra UI uses .js extension for ESM modules. Any other package that depends on Chakra UI and uses .mjs extension for ESM modules will run into this error. Renaming all .mjs files to .js in @saas-ui/react ultimately resolved it for now, but this is more a workaround then a solution imho.

I looked into framer as well, which had a similar issue open with Next.js last year. They are using require (.js) and default (.mjs) without any issues, so that doesn’t seem to be the problem.

https://github.com/vercel/next.js/issues/30750

Here to proposed solution was to use .mjs.

I’m not sure what is going on, but anyway the compiler behaviour changes based on which extension is used for ESM modules, while the package.json definitions are the same, as well as the code of the modules.