@mui/x-charts cannot be used in Next.js, because CJS tries to import ESM

[bartlangelaan]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/mui-mui-x-9556-4k5m67

Steps:

1. Start a new Next.js project (either app-router or pages-router, both won't work)
2. Install and import @mui/x-charts
3. Error

Current behavior 😯

The following error is thrown by Next.js:

- error Error [ERR_REQUIRE_ESM]: require() of ES Module /workspace/node_modules/d3-scale/src/index.js from /workspace/node_modules/@mui/x-charts/context/CartesianContextProvider.js not supported.
Instead change the require of index.js in /workspace/node_modules/@mui/x-charts/context/CartesianContextProvider.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/workspace/node_modules/@mui/x-charts/context/CartesianContextProvider.js:11:16)
    at Object.<anonymous> (/workspace/node_modules/@mui/x-charts/context/index.js:18:33)
    at Object.<anonymous> (/workspace/node_modules/@mui/x-charts/index.js:24:16)
    at @mui/x-charts (/workspace/.next/server/pages/index.js:62:18)
    at __webpack_require__ (/workspace/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./pages/index.tsx:7:71)
    at ./pages/index.tsx (/workspace/.next/server/pages/index.js:32:1)

In the browser, this is shown:

Error: require() of ES Module [...]/node_modules/d3-scale/src/index.js from [...]/@mui/x-charts/context/CartesianContextProvider.js not supported.
Instead change the require of index.js in [...]/node_modules/@mui/x-charts/context/CartesianContextProvider.js to a dynamic import() which is available in all CommonJS modules.

Expected behavior 🤔

The component would be imported just fine.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 18.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.5 
    @mui/core-downloads-tracker:  5.13.4 
    @mui/material: ^5.13.6 => 5.13.6 
    @mui/private-theming:  5.13.1 
    @mui/styled-engine:  5.13.2 
    @mui/system:  5.13.6 
    @mui/types:  7.2.4 
    @mui/utils:  5.13.6 
    @mui/x-charts: ^6.0.0-alpha.1 => 6.0.0-alpha.1 
    @types/react: 18.2.6 => 18.2.6 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.0.4 => 5.0.4

Order ID or Support key 💳 (optional)

No response

[bartlangelaan]

It looks like the d3-scale package does not support CJS, only ESM.
The @mui/x-charts package currently does not support ESM. Related: mui/material-ui#30671

Because the charts package is new, maybe this is the chance to make this package ESM compatible?
Publint explains the issues with the way the package is published: https://publint.dev/@mui/x-charts@6.0.0-alpha.1

[alexfauquette]

Thanks for the clear issue description. As a workaround, you can use next/dynamic to import components using charts.

But I agree we should find a way to make it work out of the box.

[alexfauquette]

I might have found a solution

#9645

I've already tested it with the docs mui/material-ui#37609

Could you please give it a try by modifying the package.json as follow?

- "@mui/x-charts": "6.0.0-alpha.1",
+ "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/0321f7bb/@mui/x-charts",

[alexfauquette]

Should be fixed by #9645 (available from v6.0.0-alpha.4)

[kajann]

I've installed "@mui/x-charts": "^6.0.0-alpha.5", and I'm still getting the same error.

Instead change the require of index.js in /workspace/test/node_modules/@mui/x-charts/context/CartesianContextProvider.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/workspace/test/node_modules/@mui/x-charts/context/CartesianContextProvider.js:11:16)
    at Object.<anonymous> (/workspace/test/node_modules/@mui/x-charts/context/index.js:18:33)
    at Object.<anonymous> (/workspace/test/node_modules/@mui/x-charts/index.js:24:16)
    at @mui/x-charts (/workspace/test/.next/server/pages/index.js:112:18)```

[oliviertassinari]

@kajann Do you have a reproduction with the latest version?

[jdubpark]

I can confirm the issue is persistent in Next.js projects, even with version 6.0.0-alpha.5. My Next.js template was created yesterday using npx create-next-app@latest next-app --use-yarn

For example,

import { LineChart } from '@mui/x-charts/LineChart'

leads to the error of the screenshot below (omitted root directory of my project)

(below in VSCode)

Cannot find module '@mui/x-charts/LineChart' or its corresponding type declarations.

Info from npx @mui/envinfo

System:
    OS: macOS 13.4.1
  Binaries:
    Node: 16.17.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Edge: Not Found
    Safari: 16.5.2
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.8 
    @mui/core-downloads-tracker:  5.14.2 
    @mui/material: ^5.14.2 => 5.14.2 
    @mui/private-theming:  5.13.7 
    @mui/styled-engine:  5.13.2 
    @mui/styles: ^5.14.1 => 5.14.1 
    @mui/system:  5.14.1 
    @mui/types:  7.2.4 
    @mui/utils:  5.14.1 
    @mui/x-charts: 6.0.0-alpha.5 => 6.0.0-alpha.5 
    @types/react: 18.2.17 => 18.2.17 
    react: ^18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: ^5.1.6 => 5.1.6 

cc @oliviertassinari @alexfauquette

[jdubpark]

Seems like the issue is still persistent (not ESM compatible) https://publint.dev/@mui/x-charts@6.0.0-alpha.5

[alexfauquette]

I created a simple repository with npx create-next-app@latest next-app --use-yarn:
https://github.com/alexfauquette/charts-next-test

The yarn dev works. The yarn build fails because of missing types

[alexfauquette]

@kajann I will keep this issue closed and track progresses in #9826. You can upvote it or subscribe to get updates on it

@jdubpark You issue should be fixed by #9885