[core] True ESM support

[oliviertassinari]

Steps to reproduce

I'm creating this issue as an umbrella to solve ESM support in Material UI v7.

What does success looks like?

• We close those issues

  • [ESM] @mui/icons-material move to pure ESM #35233
  • [ESM] Publish packages in ESM module format #30671
  • [ESM] Feature a distribution compatible with Node in "type": "module" #37335
  • [ESM] Webpack 5 - NodeJs Server #30525
  • [ESM] Vite + vitest + @mui/material v5.11.0 - createPalette.js:1 seems to be an ES Module but shipped in a CommonJS package.  #35773
  • [ESM][core] Add exports to the package.json #26254
  • [core] Hydration error using nextjs turbopack and icons-material #44055
  • Material UI v6 + Remix + Vite running with “Prop className did not match” error #43980
  • [icons-material] Importing from @mui/icons-material throws error in Remix/Vite #44265
  • Uncaught TypeError: SvgIcon_default is undefined with vite in dev mode after @mui/[email protected]+ #44180
  • MUI not working with React Router 7 and Vite #45018
  • Native ESM support required to support React Router V7 #45281
  • [material-ui] Compatibility issues with Remix #44993
  • [system] Import error when using Material UI styles with Remix v2 #42544
  • mui working with named imports only in dev and production, otherwise it errors #37375
  • TypeError: createTheme_default is not a function #43433
  • Box modules is broken #43242
  • Import error when using Material UI styles with React router v7 framework #45300
  • Problems with module and vite ssr #45149
  • useTheme doesn't reflect custom theme values when used with Remix SSR setup #31233
  • Improve support for using @mui in vitest with explicit exports in package.json for ESM support #45495
  • Directory import '/@mui/material/utils' is not supported resolving ES modules #45599
  • [tree view][ESM] package exports are incorrect mui-x#12077
  • [charts][ESM] Can't import @mui/x-charts under node.js mui-x#11016

• Likely same root cause

  • Theme switching doesn't work with Remix #31140
  • [charts][docs] LineChart stackblitz link creates a broken application mui-x#13612

• in other projects (post stable release):

  • MUI React Component Library / Fails in all modes wakujs/waku#428
  • Popper.js:11 Uncaught TypeError: styled_default is not a function at Popper.js:11:20  vitejs/vite#12423

• (post stable release) https://github.com/wooorm/npm-esm-vs-cjs/blob/c0a92334da4979f7614143734bbe7931d2a0dcde/data/2024-08-28.json#L2626 is no longer flagged as "faux" but "dual", see their legend description.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: -

[DiegoAndai]

One of the proposals in #35233 was changing the icons package to be ESM only. This would help reduce the size of the package to 2/3 of its current size (keep type definitions and ESM, remove CJS). Should we do that for v7? @Janpot

[Janpot]

for v7 I'd like to go to dual mode packages with exports field and a single layout that's the same across all packages. Personally I think if we go ESM only with one package we should do it for all. The less we confuse bundlers, the better 🙂

[DiegoAndai]

That makes sense 👍🏼

[o-alexandrov]

Idk whether the following issue is considered expected, as it's an alpha version.
Just fyi, when using 7.0.0-alpha.1 and importing:

import zIndexMui from "@mui/material/styles/zIndex"

the following error happens:

  The module "./esm/styles/zIndex/index.js" was not found on the file system:

    ../node_modules/@mui/material/package.json:95:19:
      95 │         "default": "./esm/*/index.js"
         ╵                    ~~~~~~~~~~~~~~~~~~

As I understand it, the issue is due to either:

• invalid default directive in @mui/material/package.json
• or you might want to consider to export zIndex from styles/index.js

The released zIndex doesn't have an index.js file.
It's located at:

node_modules/@mui/material/esm/styles/zIndex.js

[Janpot]

Idk whether the following issue is considered expected

It is expected, we don't consider subpath imports more than one level deep part of our public API. v7 will more strongly enforce that. We're documenting this in the upcoming migration guide.

As for your use-case, I suppose our intention would be to read the default z-index from the default theme.

import { createTheme } from '@mui/material/styles'
const { zIndex } = createTheme()

cc @siriwatknp would it make sense to separately export the default z-index from @mui/material/styles? Or perhaps it would make sense to memoize the default theme on multiple calls to createTheme to reduce the impact of calling it multiple times?

We could also more explicitly define our exports in package.json instead of using the wildcard

[cmdcolin]

not sure if it is expected, but @mui/icons-material v7 beta.2 does not find the types with moduleResolution:node(?)

example https://stackblitz.com/edit/react-vjasx57o?file=Demo.tsx

screenshot

i see similar error with a local project as the stackblitz too

Example error I see locally

packages/core/ui/DraggableDialog.tsx:3:23 - error TS7016: Could not find a declaration file for module '@mui/icons-material/Close'. '/home/cdiesh/src/jbrowse-components/node_modules/@mui/icons-material/Close.js' implicitly has an 'any' type.
  There are types at '/home/cdiesh/src/jbrowse-components/node_modules/@mui/icons-material/esm/icon.d.ts', but this result could not be resolved under your current 'moduleResolution' setting. Consider updating to 'node16', 'nodenext', or 'bundler'.

3 import CloseIcon from '@mui/icons-material/Close'
                        ~~~~~~~~~~~~~~~~~~~~~~~~~~~

[Janpot]

Fixing it in #45444