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

Janpot commented 9 months ago

Steps to reproduce

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

Steps:

Open the example
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 https://github.com/mui/mui-toolpad/pull/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/envinfo@2.0.12 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 commented 7 months ago

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

oliviertassinari commented 7 months ago

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

Janpot commented 7 months ago

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

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 commented 7 months ago

@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 commented 7 months ago

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 commented 5 months ago

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 commented 5 months ago

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

vimutti77 commented 5 months ago

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

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

Steps

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

vimutti77 commented 5 months ago

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 commented 4 months ago

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"],
  },
// ...

=>

Screenshot 2024-04-04 at 16 43 04

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 commented 3 months ago

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 commented 3 months ago

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 😃

mui / mui-x