Dependencies with exports field break on pages router with esmExternals: false
#65056
Comments
DiegoAndai
changed the title
exports field break on pages router with esmExternals: falseexports field break on pages router with esmExternals: false | 'loose'
DiegoAndai
changed the title
exports field break on pages router with esmExternals: false | 'loose'exports field break on pages router with esmExternals: false
github-actions
bot
added
the
linear: next
With failed you mean everything worked in minimal repros? Does it work if you run
And with |
|
14.2.x turbopack havent supported esmExternals so it's not able to run it. The root cause is for pages router, since you disable the Ideally you shouldn't need to disable |
huozhi
removed
the
linear: next
github-actions
bot
added
the
linear: next
Yes, I tried to reproduce the issue in a new Next.js app but couldn't.
Yes, probably because of what @huozhi explained in the comment above.
I agree, but we are not able to use |
|
Hi! Any progress on this issue? It is affecting us as well. Thanks! |
|
@DiegoAndai the repro in #49898 is incorrect, it's require a ESM and expect it to be sync. |
What do you mean by "it's incorrect"?
If I disable it, I get the same error that prompted us to create #49898. This is the error: Here's more background: emotion-js/emotion#3032 (comment). If you want to test it yourself, I've created a branch for it: https://github.com/DiegoAndai/material-ui/tree/disable-esm-externals-false. So you can
Note that this is still reproducible in next v14. Thanks in advance for taking a look 😊. |
|
In #49898 's reproduction There's a file cjs module requiring a ESM module, and they expect the require can get a sync module, which is not correct. // ./common.js
module.exports = require("./esmish");// ./esmish.js
export { default as unitless } from "@emotion/unitless";This would break the module resolving when you expect them to work properly. Do you know what's the similar case in mui or emotion-js that causes you have to disable |
|
@huozhi from the error I'm getting: The issue seems to be this: https://github.com/mui/material-ui/blob/next/packages/mui-icons-material/lib/ArticleRounded.js (and similar files) import from https://github.com/mui/material-ui/blob/next/packages/mui-icons-material/lib/utils/createSvgIcon.js, and the default export seems like is not set up properly. This is one instance but we probably have this setup throughout the mui codebase. Might this be it? |
@huozhi I've been investigating this a little bit, and your comment seems to point in the direction. Our setup involves a monorepo that contains workspaces for a next.js application and packages that are consumed by this application as well as published. Our setup contains some custom webpack configuration to transpile dependent workspaces by combining aliases with the default babel loader:
Inspecting the bundles with Some modules external to the repository also depend on packages from workspace. To make sure on the server they resolve these dependencies to the exact same version as the transpiled ones, they are omitted from the webpack externals as per: Some of these packages (e.g. @mui/x-data-grid) don't export node.js compatible ESM modules, so it seems like webpack resolves to using their commonjs files. These call sync I'm aware this is a bit of an exotic setup. I'm personally not a huge fan of the complexity, but it has great DX. We need a way out of this situation.
|
Link to the code that reproduces this issue
https://github.com/DiegoAndai/esm-test-13-nextjs-pages-mui-exports-ts
To Reproduce
npm installnpm run devhttp://localhost:3000in the browserDescription
We're trying to add the
exportsfield to thepackage.jsonof 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:Full error
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/AWhich area(s) are affected? (Select all that apply)
Pages Router
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
14.2.3,13.5.1, and13.4.0.The text was updated successfully, but these errors were encountered: