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

MonstraG · 2023-07-28T14:18:39Z

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 🔦

Seems to be a bug with Next.js: vercel/next.js#39375.

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

The text was updated successfully, but these errors were encountered:

cherniavskii · 2023-07-31T10:18:16Z

@alexfauquette This might be coming from the main entry point https://unpkg.com/browse/@mui/x-charts@6.0.0-alpha.5/context/CartesianContextProvider.js

alexfauquette · 2023-07-31T12:07:49Z

Yes, but the export of the package.json should import those files from https://unpkg.com/browse/@mui/x-charts@6.0.0-alpha.5/esm/context/CartesianContextProvider.js which does not have this issue 🤔

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

MonstraG · 2023-07-31T13:03:31Z

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 · 2023-07-31T14:12:56Z

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

MonstraG · 2023-07-31T14:19:59Z

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 · 2023-08-08T08:47:16Z

Updated to @mui/x-charts@v6.0.0-alpha.6, 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 · 2023-08-28T22:32:38Z

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.

#9826 (comment) 's workaround did the trick. But this shouldn't be needed to make it work.

tedma4 · 2023-09-08T17:23:26Z

@oliviertassinari What version of Next were you using?

Vadux-web · 2024-05-14T18:17:18Z

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 · 2024-07-29T15:22:50Z

⚠️ 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 · 2024-07-29T16:07:15Z

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

MonstraG added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jul 28, 2023

MonstraG changed the title ~~[charts] Doesn't build due to require() of ES Module~~ [charts] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM) Jul 28, 2023

cherniavskii added the component: charts This is the name of the generic UI component, not the React module! label Jul 31, 2023

alexfauquette added bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jul 31, 2023

alexfauquette mentioned this issue Aug 2, 2023

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

Closed

2 tasks

oliviertassinari changed the title ~~[charts] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM)~~ [ESM][charts] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM) Aug 12, 2023

oliviertassinari mentioned this issue Aug 31, 2023

[charts] Issue with imports in DrawingProvider #10178

Closed

2 tasks

oliviertassinari mentioned this issue Oct 8, 2023

MUI-X-Charts Not Building Properly in Next.js 12 Application #10565

Closed

oliviertassinari added the nextjs label Dec 30, 2023

oliviertassinari changed the title ~~[ESM][charts] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM)~~ [nextjs][charts] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM) Dec 30, 2023

oliviertassinari changed the title ~~[nextjs][charts] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM)~~ [charts][nextjs] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM) Dec 30, 2023

This comment was marked as resolved.

Sign in to view

alexfauquette mentioned this issue Jan 4, 2024

[charts][ESM] @mui/x-charts does not work with jest #11568

Closed

oliviertassinari changed the title ~~[charts][nextjs] Doesn't build due to require() of ES Module (ERR_REQUIRE_ESM)~~ [charts][ESM] Doesn't build in Next.js due to require() of ES Module (ERR_REQUIRE_ESM) Jan 29, 2024

alexfauquette mentioned this issue Apr 2, 2024

[charts] Dependecy Issue - Possible missing module #12600

Closed

alexfauquette mentioned this issue Jun 26, 2024

[charts] Use vendor to have CJS working out of the box #13608

Merged

4 tasks

alexfauquette closed this as completed in #13608 Jul 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

MonstraG commented Jul 28, 2023 •

edited by oliviertassinari

Loading

cherniavskii commented Jul 31, 2023

alexfauquette commented Jul 31, 2023

MonstraG commented Jul 31, 2023 •

edited by oliviertassinari

Loading

alexfauquette commented Jul 31, 2023

MonstraG commented Jul 31, 2023 •

edited

Loading

MonstraG commented Aug 8, 2023

oliviertassinari commented Aug 28, 2023 •

edited

Loading

tedma4 commented Sep 8, 2023

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

Vadux-web commented May 14, 2024 •

edited

Loading

github-actions bot commented Jul 29, 2024

alexfauquette commented Jul 29, 2024

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

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

Comments

MonstraG commented Jul 28, 2023 • edited by oliviertassinari Loading

Steps to reproduce 🕹

Current behavior 😯

Expected behavior 🤔

Context 🔦

Your environment 🌎

Order ID or Support key 💳 (optional)

cherniavskii commented Jul 31, 2023

alexfauquette commented Jul 31, 2023

MonstraG commented Jul 31, 2023 • edited by oliviertassinari Loading

alexfauquette commented Jul 31, 2023

MonstraG commented Jul 31, 2023 • edited Loading

MonstraG commented Aug 8, 2023

oliviertassinari commented Aug 28, 2023 • edited Loading

tedma4 commented Sep 8, 2023

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

Vadux-web commented May 14, 2024 • edited Loading

github-actions bot commented Jul 29, 2024

alexfauquette commented Jul 29, 2024

MonstraG commented Jul 28, 2023 •

edited by oliviertassinari

Loading

MonstraG commented Jul 31, 2023 •

edited by oliviertassinari

Loading

MonstraG commented Jul 31, 2023 •

edited

Loading

oliviertassinari commented Aug 28, 2023 •

edited

Loading

Vadux-web commented May 14, 2024 •

edited

Loading