Webpack alias for @mui/material$ breaks ESM importing it

[jedwards1211]

Link to the code that reproduces this issue

https://github.com/jedwards1211/next-mui-esm-issue

To Reproduce

1. npm run build
2. Inspect console output; see next section

Current vs. Expected behavior

Current behavior

In the console output, you will see

   Generating static pages (0/6)  [=   ]
test.mjs Menu { default: [Function (anonymous)] }

page.js Menu [Function (anonymous)]

Expected behavior

Both should be the same:

test.mjs Menu { default: [Function (anonymous)] }

page.js Menu [Function (anonymous)]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
Binaries:
  Node: 18.3.0
  npm: 8.11.0
  Yarn: 1.22.19
  pnpm: 8.6.2
Relevant Packages:
  next: 13.5.7-canary.17
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure, Static HTML Export (output: "export")

Additional context

If I console.log(config.resolve.alias) on the webpack config, in one case I see a rule

  '@mui/material$': '/Users/andy/gh/next-mui-esm-issue/node_modules/@mui/material/index.js',

This is causing problems when ESM tries to import { Menu } from '@mui/material'.

When @mui/material/index.js imports from ./Menu, it expects to be getting ./Menu/index.js. But instead, it's getting resolved to ./node/Menu/index.js due to the main rule in ./Menu/package.json and the fact that Next sets mainFields: ['main', 'module'].

Looking at unminimized Webpack output, in page.js, it unwraps the default. But in test.mjs it doesn't, just like when you import CJS from ESM in Node.

// EXTERNAL MODULE: ./node_modules/@mui/material/node/Menu/index.js
var Menu = __webpack_require__(94208);
var Menu_default = /*#__PURE__*/__webpack_require__.n(Menu);
;// CONCATENATED MODULE: ./app/test.mjs

console.log();
console.log("test.mjs", "Menu", Menu);

;// CONCATENATED MODULE: ./app/page.js

console.log();
console.log("page.js", "Menu", (Menu_default()));

Ideally, test.mjs should be getting @mui/material/Menu/index.js, since it's ESM and @mui/material/node/Menu/index.js is CJS.

@mui/material has set module in their package.jsons that normally should work. Next's mainFields: ['main', 'module'] combined with the alias for @mui/material$ blows up in combination with this.