[charts][ESM] Can't import @mui/x-charts under node.js

[Janpot]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/stackblitz-starters-6fdpqg?file=index.mjs

Steps:

1. Open the example
2. Run node index.mjs

Current behavior

Error:

(node:13) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/projects/stackblitz-starters-6fdpqg/node_modules/@mui/x-charts/esm/BarChart/index.js:1
export { BarPlot } from './BarPlot';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (https://stackblitzstarters6fdpqg-e4oc.w-credentialless.staticblitz.com/blitz.5a198b5c.js:180:1005)
    at wrapSafe (https://stackblitzstarters6fdpqg-e4oc.w-credentialless.staticblitz.com/blitz.5a198b5c.js:55:14101)
    at Module._compile (https://stackblitzstarters6fdpqg-e4oc.w-credentialless.staticblitz.com/blitz.5a198b5c.js:55:14512)
    at Module._extensions..js (https://stackblitzstarters6fdpqg-e4oc.w-credentialless.staticblitz.com/blitz.5a198b5c.js:55:15550)
    at Module.load (https://stackblitzstarters6fdpqg-e4oc.w-credentialless.staticblitz.com/blitz.5a198b5c.js:55:13457)
    at Module._load (https://stackblitzstarters6fdpqg-e4oc.w-credentialless.staticblitz.com/blitz.5a198b5c.js:55:10535)

Expected behavior

The module can be imported under Node.js

Context

See mui/toolpad#2915

In Toopad we import our components under node.js to read out its configuration and generate documentation. Failing build: https://app.circleci.com/pipelines/github/mui/mui-toolpad/11238/workflows/9bd45ad4-e0d1-40d4-b4b8-c22e44035107/jobs/49528. The @mui/x-charts package is not spec compliant. To make it so we'll need to:

• for ESM modules, use the .mjs extension, so that Node.js knows how it can be imported. We should probably just do this in general for all of our packages.
• for imports of files, always specify the file extension. We can automate this in the build system.
• ?

Your environment

npx @mui/envinfo

npx @mui/envinfo
Need to install the following packages:
  @mui/[email protected]
Ok to proceed? (y) y

  System:
    OS: Linux 5.0 undefined
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @mui/base:  5.0.0-beta.23 
    @mui/types:  7.2.8 
    @mui/utils:  5.14.17 
    @mui/x-charts: ^6.18.1 => 6.18.1 
    react: ^18.2.0 => 18.2.0 

Search keywords: import charts node.js esm

[JamieHolmes97]

Also having the exact same problem atm while working on a Remix based project.

[oliviertassinari]

The issue is broader to MUI in general. It's not so pretty https://stackblitz.com/edit/stackblitz-starters-qxwznw?file=index.mjs.

[Janpot]

👍 This is a long standing issue. More context in the following:

• [ESM] Publish packages in ESM module format material-ui#30671
• [ESM] Webpack 5 - NodeJs Server material-ui#30525
• [ESM][core] Add exports to the package.json material-ui#26254
• [ESM] Feature a distribution compatible with Node in "type": "module" material-ui#37335
• Draft: Try converting packages to ESM material-ui#30510

We're just starting on an effort with @DiegoAndai and @mui/code-infra to try and solve it for v6. End goal is to remove all commonjs from the package and have it load esm files both in node.js and in bundlers. Eventually being ESM only and eliminating all the dual loading issues.

[oliviertassinari]

@Janpot I guess where @mui/x-charts is different is that there is no way to import under node.js ESM. I assume it's because it uses the exports field with .js files but not "type": "module" or .mjs files.

Anyway, fixing this sounds great. People before us tried https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/, I would hope the ecosystem is in a better shape to make it work.

[Janpot]

I guess where @mui/x-charts is different is that there is no way to import under node.js ESM. I assume it's because it uses the exports field with .js files but not "type": "module" or .mjs files.

Yep, that;s roughly it. The @mui/x-charts doesn't contain any commonjs files and its esm files use the .js extension, so node.js tries to load them as commonjs, which fails. The solution is either make sure we output those as .mjs to teach node they are esm files, or to use type: module to teach node that the js extension means "esm file". I'm in favour of starting with the former solution as I don't expect to confuse bundlers with this change, I'd even be comfortable releasing that on a minor version.

[vimutti77]

I urgently need to use @mui/x-charts in my Remix+Vite project.
Do you have any quick workaround before the issue has been fixed?

[Janpot]

@vimutti77 Can you provide a minimal reproduction for your setup?

[vimutti77]

@vimutti77 Can you provide a minimal reproduction for your setup?

Here is the repo: https://github.com/vimutti77/remix-vite-mui

Steps

1. Run npm install
2. Run npm run dev
3. Open http://localhost:5173/
4. You will get error Unexpected token 'export'
5. Remove BarChart from /app/routes/_index.tsx
6. Error gone

[vimutti77]

I'm not sure if this will be helpful, but Lexical also encountered a similar issue with ESM.
They managed to resolve it by using .mjs file extensions for their ESM.

But for now, I'm using React.lazy and Suspense as my workaround.

const BarChart = lazy(() => import('@mui/x-charts').then((x) => ({ default: x.BarChart })))

<Suspense>
  <BarChart .../>
</Suspense>

[Janpot]

Thank you. For now you can fix it by transpiling @mui/utils and @mui/x-charts

// vite.config.ts

// ...
  ssr: {
    noExternal: ["@mui/utils", "@mui/x-charts"],
  },
// ...

=>

In core, for v7, we're at the moment working on making the packages compatible with Node.js ESM loader. Once that work is complete we'll port the method to X and this should make all X packages runnable under Node.js as well. In the meantime you can fall back to transpiling the packages on Node.js.

[owenmorgan]

Thank you. For now you can fix it by transpiling @mui/utils and @mui/x-charts

// vite.config.ts

// ...
  ssr: {
    noExternal: ["@mui/utils", "@mui/x-charts"],
  },
// ...

=>

In core, for v7, we're at the moment working on making the packages compatible with Node.js ESM loader. Once that work is complete we'll port the method to X and this should make all X packages runnable under Node.js as well. In the meantime you can fall back to transpiling the packages on Node.js.

when trying this - it 'resolves' the initial error but then i see the following:

Application Error
Error: Cannot find module '@emotion/styled'

[Tobbe129]

Hi! Any progress on this? Is there any way I can use x-charts for with my nodejs setup? Using the latest nodejs and are getting the error as stated in issue. Appreciate all the answers and help I can get. This is the last piece of a puzzle I've been working on for 9 years 😃