Dependencies with `exports` field break on pages router with `esmExternals: false`
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
Link to the code that reproduces this issue
https://github.com/DiegoAndai/esm-test-13-nextjs-pages-mui-exports-ts
To Reproduce
- Clone https://github.com/DiegoAndai/esm-test-13-nextjs-pages-mui-exports-ts
- Run
npm install - Run
npm run dev - Open
http://localhost:3000in the browser - You should see the error
Description
We're trying to add the exports field to the package.json of MUI core libraries (PR | Docs).
This app is using the MUI libraries from the PR build (e.g., https://pkg.csb.dev/mui/material-ui/commit/fb7a4ff2/@mui/material).
When testing the libraries on a Next.js app with pages router and esmExternals: false, we get the following error:
⨯ TypeError: _mui_utils_deepmerge__WEBPACK_IMPORTED_MODULE_3__ is not a function
Full error
⨯ TypeError: _mui_utils_deepmerge__WEBPACK_IMPORTED_MODULE_3__ is not a function
at createPalette (webpack-internal:///./node_modules/@mui/material/styles/createPalette.mjs:266:27)
at createTheme (webpack-internal:///./node_modules/@mui/material/styles/createTheme.mjs:47:83)
at eval (webpack-internal:///./node_modules/@mui/material/styles/defaultTheme.mjs:7:82)
at ./node_modules/@mui/material/styles/defaultTheme.mjs (/Users/diegoandai/MUI/experiments/esm-test-13-nextjs-pages-mui-exports-ts/.next/server/vendor-chunks/@mui.js:260:1)
at __webpack_require__ (/Users/diegoandai/MUI/experiments/esm-test-13-nextjs-pages-mui-exports-ts/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./node_modules/@mui/material/styles/styled.mjs:8:75)
at ./node_modules/@mui/material/styles/styled.mjs (/Users/diegoandai/MUI/experiments/esm-test-13-nextjs-pages-mui-exports-ts/.next/server/vendor-chunks/@mui.js:310:1)
at __webpack_require__ (/Users/diegoandai/MUI/experiments/esm-test-13-nextjs-pages-mui-exports-ts/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./node_modules/@mui/material/Button/Button.mjs:13:77)
at ./node_modules/@mui/material/Button/Button.mjs (/Users/diegoandai/MUI/experiments/esm-test-13-nextjs-pages-mui-exports-ts/.next/server/vendor-chunks/@mui.js:20:1)
at __webpack_require__ (/Users/diegoandai/MUI/experiments/esm-test-13-nextjs-pages-mui-exports-ts/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///./node_modules/@mui/material/Button/index.mjs:6:69)
at ./node_modules/@mui/material/Button/index.mjs (/Users/diegoandai/MUI/experiments/esm-test-13-nextjs-pages-mui-exports-ts/.next/server/vendor-chunks/@mui.js:40:1)
at __webpack_require__ (/Users/diegoandai/MUI/experiments/esm-test-13-nextjs-pages-mui-exports-ts/.next/server/webpack-runtime.js:33:42)
at __barrel_optimize__?names=Button!=!./node_modules/@mui/material/index.mjs (/Users/diegoandai/MUI/experiments/esm-test-13-nextjs-pages-mui-exports-ts/.next/server/pages/index.js:26:75) {
page: '/'
}
GET / 500 in 128ms
This seems related to default import/export interop between esm and cjs: https://www.typescriptlang.org/docs/handbook/modules/appendices/esm-cjs-interop.html
The expected is for the app to run without erroring.
Provide environment information
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 22.5.0: Thu Jun 8 22:22:22 PDT 2023; root:xnu-8796.121.3~7/RELEASE_X86_64
Available memory (MB): 16384
Available CPU cores: 16
Binaries:
Node: 18.19.0
npm: 10.4.0
Yarn: 1.22.21
pnpm: 8.14.1
Relevant Packages:
next: 14.2.3 // Latest available version is detected (14.2.3).
eslint-config-next: 14.2.3
react: 18.3.0
react-dom: 18.3.0
typescript: 5.4.5
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Pages Router
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
- I've tested with Next.js
14.2.3,13.5.1, and13.4.0. - I tried to create a minimal repro, but I couldn't figure it out. I'm sorry about this.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction: run npm install, then npm run dev with the pages router and esmExternals: false. Read the generated stack trace around node_modules/@mui/material/styles/createPalette.mjs and the _mui_utils_deepmerge_ import. Done means the reproduced app loads at / without the TypeError.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, node.js, react, typescript, webpack
- Domain
- build-system, frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100