[charts][ESM] Doesn't build in Next.js due to require() of ES Module (ERR_REQUIRE_ESM)

[MonstraG]

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/vibrant-tharp-7ktt9w

Current behavior 😯

Server Error:

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

Stacktrace

Call Stack
Object.<anonymous>
file:///project/home/monstrag/workspace/node_modules/@mui/x-charts/context/CartesianContextProvider.js (11:16)
Object.<anonymous>
file:///project/home/monstrag/workspace/node_modules/@mui/x-charts/context/index.js (18:33)
Object.<anonymous>
file:///project/home/monstrag/workspace/node_modules/@mui/x-charts/index.js (24:16)
Object.@mui/x-charts
file:///project/home/monstrag/workspace/.next/server/pages/index.js (102:18)
__webpack_require__
file:///project/home/monstrag/workspace/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./pages/index.tsx (7:71)
Function.__webpack_require__.a
file:///project/home/monstrag/workspace/.next/server/webpack-runtime.js (97:13)
eval
webpack-internal:///./pages/index.tsx (1:21)
Object../pages/index.tsx
file:///project/home/monstrag/workspace/.next/server/pages/index.js (62:1)
__webpack_require__
file:///project/home/monstrag/workspace/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js (23:74)
Function.__webpack_require__.a
file:///project/home/monstrag/workspace/.next/server/webpack-runtime.js (97:13)
eval
webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js (1:21)
Object../node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?page=%2F&preferredRegion=&absolutePagePath=.%2Fpages%2Findex.tsx&absoluteAppPath=private-next-pages%2F_app&absoluteDocumentPath=private-next-pages%2F_document&middlewareConfigBase64=e30%3D!
file:///project/home/monstrag/workspace/.next/server/pages/index.js (32:1)
__webpack_require__
file:///project/home/monstrag/workspace/.next/server/webpack-runtime.js (33:42)
__webpack_exec__
file:///project/home/monstrag/workspace/.next/server/pages/index.js (212:39)
<unknown>
file:///project/home/monstrag/workspace/.next/server/pages/index.js (213:28)
Object.<anonymous>
file:///project/home/monstrag/workspace/.next/server/pages/index.js (216:3)
requirePage
file:///project/home/monstrag/workspace/node_modules/next/dist/server/require.js (112:75)
<unknown>
file:///project/home/monstrag/workspace/node_modules/next/dist/server/load-components.js (80:84)
async loadComponentsImpl
file:///project/home/monstrag/workspace/node_modules/next/dist/server/load-components.js (80:26)
async DevServer.findPageComponentsImpl
file:///project/home/monstrag/workspace/node_modules/next/dist/server/next-server.js (772:36)
async DevServer.findPageComponents
file:///project/home/monstrag/workspace/node_modules/next/dist/server/dev/next-dev-server.js (1271:20)
async DevServer.renderPageComponent
file:///project/home/monstrag/workspace/node_modules/next/dist/server/base-server.js (1357:24)
async DevServer.renderToResponseImpl
file:///project/home/monstrag/workspace/node_modules/next/dist/server/base-server.js (1401:32)
async DevServer.pipeImpl
file:///project/home/monstrag/workspace/node_modules/next/dist/server/base-server.js (645:25)
async Object.fn
file:///project/home/monstrag/workspace/node_modules/next/dist/server/next-server.js (1153:21)
async Router.execute
file:///project/home/monstrag/workspace/node_modules/next/dist/server/router.js (315:32)
async DevServer.runImpl
file:///project/home/monstrag/workspace/node_modules/next/dist/server/base-server.js (619:29)
async DevServer.run
file:///project/home/monstrag/workspace/node_modules/next/dist/server/dev/next-dev-server.js (910:20)
async DevServer.handleRequestImpl
file:///project/home/monstrag/workspace/node_modules/next/dist/server/base-server.js (546:20)

Expected behavior 🤔

Runs

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.15.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.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/system: 5.14.1 => 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 

Order ID or Support key 💳 (optional)

No response

[cherniavskii]

@alexfauquette This might be coming from the main entry point https://unpkg.com/browse/@mui/[email protected]/context/CartesianContextProvider.js

[alexfauquette]

Yes, but the export of the package.json should import those files from https://unpkg.com/browse/@mui/[email protected]/esm/context/CartesianContextProvider.js which does not have this issue 🤔

  "exports": {
    ".": {
      "require": "./index.js",
      "import": "./esm/index.js"
    },
    "./*": {
      "require": "./*",
      "import": "./esm/*"
    }
  },

[MonstraG]

For now, I've dealt with this by adding it to transpilePackages in my Next.js app:

next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  transpilePackages: ['@mui/x-charts'],
};

[alexfauquette]

Did you also had to transpile the d3-* libraries?

[MonstraG]

No (at least I did not need to include them in the list). I'm unsure on whether it's done for dependencies automatically or not.

[MonstraG]

Updated to @mui/[email protected], tried removing charts from transpilePackages, now when importing charts like this:

import { PieChart } from "@mui/x-charts";

I get

Error: Cannot find module /home/project/node_modules/@mui/x-charts/PieChart'
  at createEsmNotFoundErr (node:internal/modules/cjs/loader:1096:15)
  at finalizeEsmResolution (node:internal/modules/cjs/loader:1089:15)

.

Adding modularizeImports (like I already do with @mui/material):

	modularizeImports: {
		"@mui/material": {
			transform: "@mui/material/{{member}}"
		},
		...
		"@mui/x-charts": {
			transform: "@mui/x-charts/{{member}}"
		}
	},

Gives me the same error but with a bunch of

 Attempted import error: '@mui/x-charts/BarChart' does not contain a default export (imported as 'BarChart').

So for now, I'm leaving charts in transpilePackages, and out of modularizeImports.

[oliviertassinari]

I faced the same problem with Next.js's Material UI starter example (the most used one).

Error: require() of ES Module /Users/oliviertassinari/nextjs-with-typescript/node_modules/d3-shape/src/index.js from /Users/oliviertassinari/nextjs-with-typescript/node_modules/@mui/x-charts/BarChart/formatter.js not supported.

https://github.com/mui/mui-x/issues/9826#issuecomment-1658333978 's workaround did the trick. But this shouldn't be needed to make it work.

[tedma4]

@oliviertassinari What version of Next were you using?

[Aissam41]

[Aissam41]

Unhandled Runtime Error TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Call Stack series node_modules@mui\x-charts\esm\BarChart\extremums.js (17:35) Array.reduce reduce node_modules@mui\x-charts\esm\BarChart\extremums.js (16:147) getValueExtremum node_modules@mui\x-charts\esm\BarChart\extremums.js (35:9) getter node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (79:51) axisExtremumCallback node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (95:49) Array.reduce reduce node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (95:23) getAxisExtremum node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (162:33) Array.forEach forEach node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (159:13) mountMemo node_modules\react-dom\cjs\react-dom.development.js (17225:0) Object.useMemo node_modules\react-dom\cjs\react-dom.development.js (17670:0) Object.useMemo node_modules\react\cjs\react.development.js (1650:0) React node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (73:16) renderWithHooks node_modules\react-dom\cjs\react-dom.development.js (16305:0) mountIndeterminateComponent node_modules\react-dom\cjs\react-dom.development.js (20074:0) beginWork node_modules\react-dom\cjs\react-dom.development.js (21587:0) HTMLUnknownElement.callCallback node_modules\react-dom\cjs\react-dom.development.js (4164:0) Object.invokeGuardedCallbackDev node_modules\react-dom\cjs\react-dom.development.js (4213:0) invokeGuardedCallback node_modules\react-dom\cjs\react-dom.development.js (4277:0) beginWork$1 node_modules\react-dom\cjs\react-dom.development.js (27451:0) performUnitOfWork node_modules\react-dom\cjs\react-dom.development.js (26557:0) workLoopSync node_modules\react-dom\cjs\react-dom.development.js (26466:0) renderRootSync node_modules\react-dom\cjs\react-dom.development.js (26434:0) recoverFromConcurrentError node_modules\react-dom\cjs\react-dom.development.js (25850:0) performSyncWorkOnRoot node_modules\react-dom\cjs\react-dom.development.js (26096:0) flushSyncCallbacks node_modules\react-dom\cjs\react-dom.development.js (12042:0) commitRootImpl node_modules\react-dom\cjs\react-dom.development.js (26959:0) commitRoot node_modules\react-dom\cjs\react-dom.development.js (26682:0) finishConcurrentRender node_modules\react-dom\cjs\react-dom.development.js (25981:0) performConcurrentWorkOnRoot node_modules\react-dom\cjs\react-dom.development.js (25809:0) workLoop node_modules\scheduler\cjs\scheduler.development.js (266:0) flushWork node_modules\scheduler\cjs\scheduler.development.js (239:0) MessagePort.performWorkUntilDeadline node_modules\scheduler\cjs\scheduler.development.js (533:0)

[alexfauquette]

@Aissam41 This does not seems to be related to this issue (no reference to CJS/ESM issue). Could you open another one, with a reproduction of your issue?

From the call stack, it seems you did not provide a correct series props

[Aissam41]

Unhandled Runtime Error TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

Call Stack series node_modules@mui\x-charts\esm\BarChart\extremums.js (17:35) Array.reduce reduce node_modules@mui\x-charts\esm\BarChart\extremums.js (16:147) getValueExtremum node_modules@mui\x-charts\esm\BarChart\extremums.js (35:9) getter node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (79:51) axisExtremumCallback node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (95:49) Array.reduce reduce node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (95:23) getAxisExtremum node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (162:33) Array.forEach forEach node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (159:13) mountMemo node_modules\react-dom\cjs\react-dom.development.js (17225:0) Object.useMemo node_modules\react-dom\cjs\react-dom.development.js (17670:0) Object.useMemo node_modules\react\cjs\react.development.js (1650:0) React node_modules@mui\x-charts\esm\context\CartesianContextProvider.js (73:16) renderWithHooks node_modules\react-dom\cjs\react-dom.development.js (16305:0) mountIndeterminateComponent node_modules\react-dom\cjs\react-dom.development.js (20074:0) beginWork node_modules\react-dom\cjs\react-dom.development.js (21587:0) beginWork$1 node_modules\react-dom\cjs\react-dom.development.js (27426:0) performUnitOfWork node_modules\react-dom\cjs\react-dom.development.js (26557:0) workLoopSync node_modules\react-dom\cjs\react-dom.development.js (26466:0) renderRootSync node_modules\react-dom\cjs\react-dom.development.js (26434:0) performSyncWorkOnRoot node_modules\react-dom\cjs\react-dom.development.js (26085:0) flushSyncCallbacks node_modules\react-dom\cjs\react-dom.development.js (12042:0) commitRootImpl node_modules\react-dom\cjs\react-dom.development.js (26959:0) commitRoot node_modules\react-dom\cjs\react-dom.development.js (26682:0) finishConcurrentRender node_modules\react-dom\cjs\react-dom.development.js (25981:0) performConcurrentWorkOnRoot node_modules\react-dom\cjs\react-dom.development.js (25809:0) workLoop node_modules\scheduler\cjs\scheduler.development.js (266:0) flushWork node_modules\scheduler\cjs\scheduler.development.js (239:0) MessagePort.performWorkUntilDeadline node_modules\scheduler\cjs\scheduler.development.js (533:0)

[Vadux-web]

Current behavior

export * from './PieChart'; SyntaxError: Unexpected token 'export'

Fixed with

yarn add next-transpile-modules

Then open your next.config.js file and add the following lines:

const transpiledModules = require('next-transpile-modules')(["@mui/x-charts"]);

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@MonstraG: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[alexfauquette]

The fix will be available in the next release at the end of the week