Open Janpot opened 9 months ago
Also having the exact same problem atm while working on a Remix based project.
The issue is broader to MUI in general. It's not so pretty https://stackblitz.com/edit/stackblitz-starters-qxwznw?file=index.mjs.
👍 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.
@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.
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.
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?
@vimutti77 Can you provide a minimal reproduction for your setup?
@vimutti77 Can you provide a minimal reproduction for your setup?
Here is the repo: https://github.com/vimutti77/remix-vite-mui
Steps
npm install
npm run dev
Unexpected token 'export'
BarChart
from /app/routes/_index.tsx
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>
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.
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'
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 😃
Steps to reproduce
Link to live example: https://stackblitz.com/edit/stackblitz-starters-6fdpqg?file=index.mjs
Steps:
node index.mjs
Current behavior
Error:
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:Your environment
``` 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 ```npx @mui/envinfo
Search keywords: import charts node.js esm