Specific component cannot be imported using default import with ESM

[timbset]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
I made a simple example repo: https://github.com/timbset/next-esm-example

Steps:

1. Clone, install and start using yarn dev
2. Open index page in a browser (http://localhost:3000)
3. There is an error instead of correct view

Current behavior 😯

I use ESM and I want to import specific component from a folder to minimize a bundle size. Using ESM is confirmed by setting "type": "module" in package.json. I got an object, that contains some keys including default key instead of importing component itself. This leads to error on rendering React component so the imported object is not a component at all.

Expected behavior 🤔

I expect that if I write import Paper from '@mui/material/Paper';, there is a component in the Paper constant, not a weird object.

Context 🔦

The problem is that such an import is resolved to a CommonJS approach. It exports components using the exports keyword. Default export is specified as the default key with component as a value. And ESM cannot detect that it's a default export but not a default key of an exported object. Obvious solution is to try to specify all possible ways to export including the one which will be resolved by ESM import as a real default import. A good solution would be a resolving importing from ESM module to ESM modules placed in material package. It will work natively. There is a module path in a package.json that should help to resolve package correctly, but it does not work for some reason. Maybe it is necessary to add exports object to package.json. Also maybe it should be done in a root package.json, because ESM import looks into root package.json for all specific imports base on package name due to its specification.

P.S. And yes, there can not be a solution like removing type = module in the example. This problem is not unique for this example. It also can be reproduced if I am going to implement an ESM library with material-ui as a dependency.

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 12.4
  Binaries:
    Node: 16.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.5
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/base:  5.0.0-alpha.107 
    @mui/core-downloads-tracker:  5.10.15 
    @mui/material: ^5.10.15 => 5.10.15 
    @mui/private-theming:  5.10.15 
    @mui/styled-engine:  5.10.14 
    @mui/system:  5.10.15 
    @mui/types:  7.2.1 
    @mui/utils:  5.10.15 
    @types/react:  18.0.25 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0

[timbset]

By the way, same problem with @mui/icons-material.

[michaldudak]

There is an issue in which we discuss moving to ESM: #35233. I'll close this one as a duplicate, so we have one place for discussion. Feel free to comment in the other issue.