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

[MonstraG]

[ESM][charts] Doesn't build due to require() of ES Module (ERR_REQUIRE_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'],
};

[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.

#9826 (comment) 's workaround did the trick.

[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/*"
    }
  },

[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.

[tedma4]

@oliviertassinari What version of Next were you using?