[BUG] Error [ERR_REQUIRE_ESM]: require() of ES Module. dynamic import() which is available in all CommonJS modules.

[EvgeniyBudaev]

Reproduction link

https://github.com/EvgeniyBudaev/remix-ant/blob/main/app/routes/index.tsx

Steps to reproduce

I have created a simple project. https://github.com/EvgeniyBudaev/remix-ant/blob/main/app/routes/index.tsx

What is expected?

The WordCloud component is displayed.

What is actually happening?

I get an error:

Error [ERR_REQUIRE_ESM]: require() of ES Module \remix-ant\node_modules\d3-interpolate\src\index.js from \remix-ant\node_modules@antv\g-base\lib\animate\timeline.js not supported.
Instead change the require of index.js in \remix-ant\node_modules@antv\g-base\lib\animate\timeline.js to a dynamic import() which is available in all CommonJS modules.

Environment	Info
antd	5.2.0
React	18.2.0
System	Linux
Browser	Google Chrome 109.0.5414.120

[luo3house]

This is an issue of remix because it has a commonjs ssr entry.
Please follow https://remix.run/docs/en/v1/pages/gotchas#importing-esm-packages then add esm modules in remix config.

[EvgeniyBudaev]

@luo3house If you add code to the package.json:

  "overrides": {
    "@antv/g2": "4.2.8",
    "@antv/g-base": "0.5.11",
    "@antv/path-util": "2.0.15"
  }

then everything works.

In the terminal: npm ls @antv/path-util

`-- @ant-design/plots@1.2.5
  `-- @antv/g2plot@2.4.25
    +-- @antv/g-base@0.5.14
    | `-- @antv/path-util@2.0.15
    +-- @antv/g2@4.2.9
    | +-- @antv/component@0.8.28
    | | `-- @antv/path-util@2.0.15
    | +-- @antv/g-canvas@0.5.13
    | | `-- @antv/path-util@2.0.15
    | `-- @antv/path-util@2.0.15
    `-- @antv/path-util@3.0.1

@antv/path-util@3.0.1 version causes a bug. @antv/path-util@2.0.15 version works fine.

[luo3house]

@EvgeniyBudaev

Related: antvis/G#1282

Seems d3-interpolate, d3-color are all ESM packages since v2.
And @ant-design/plots -> @antv/* have built incorrect CJS dists with d3-*.

└─┬ @ant-design/plots@1.2.5
  └─┬ @antv/g2plot@2.4.25
    └─┬ @antv/g-base@0.5.14
      └─┬ d3-interpolate@3.0.1
        └── d3-color@3.1.0

└─┬ @ant-design/plots@1.2.5
  └─┬ @antv/g2plot@2.4.25
    └─┬ @antv/g-base@0.5.14
      └── d3-interpolate@3.0.1

Therefore, here is a Remix workaround to pre-bundle them into CJS for your reproduction:

// remix.config.js
module.exports = {
  ignoredRouteFiles: ["**/.*"],
+  serverDependenciesToBundle: [
+    /@ant-design\/*/,
+    /@antv\/*/,
+    /d3-interpolate/,
+    /d3-color/,
+    /lodash-es/,
+  ],
// ...
};

[EvgeniyBudaev]

@luo3house Thank you! It works!

[hackerghost93]

@luo3house can u provide a solution for non remix repos. I use vite with react
test: { globals: true, environment: 'jsdom', setupFiles: './setupTests.js', exclude: [...configDefaults.exclude], },

I use react spa and uses latest vite and typescript

[aviralnx]

Facing same with next js
Any insights on how do I make this work?

[ahmad-punch]

Facing the same issue with Nextjs.

Error [ERR_REQUIRE_ESM]: require() of ES Module D:\Github\LunaraApp\node_modules\d3-interpolate\src\index.js from D:\Github\LunaraApp\node_modules@antv\g-base\lib\animate\timeline.js not supported
Instead change the require of index.js in D:\Github\LunaraApp\node_modules@antv\g-base\lib\animate\timeline.js to a dynamic import() which is available in all CommonJS modules.

What's the solution?

[GurungPrabhu]

For Nextjs, if CSR isn't an issue. You can try Dynamic CSR import. This solved the issue for me.

const Gauge = dynamic(
  (): any => import("@ant-design/plots").then((item) => item.Gauge),
  {
    ssr: false,
  }
)

[ivandelvaller]

const DynamicBullet = dynamic(() => import('@nivo/bullet').then(res => res.ResponsiveBullet), {
ssr: false,
});

This works for me.

[AmrAhmedA]

There are 2 possible solutions, if you are using NEXT.

If there are any imports in your project from antd/plots, make all of them as dynamic import.
the only way to fix cjs problem if you are using next is to import them using dynamic imports
https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic

or write the following line in your package json to override the dependencies of your antd plot dependency.
This bug is related to this silly path-util library that are used internally by one of antd plot dependencies g2.
it's latest update makes it to be used by esm only.
antvis/util#99
one of the possible ways to make your next app functional again is to override it by downgrading antd/plot dependencies to stable version.

  "overrides": {
    "@antv/g-base": "0.5.11",
    "@antv/path-util": "2.0.15"
  }

[JiaFei1991]

for people using React with Vite, load your component lazily will solve this issue, for example, if you are using the Line or Pie component from @ant-design/plots, import the component lazily as following:

const Line = React.lazy(() => import("@ant-design/plots").then((module) => ({ default: module.Line })));

and then wrap the Line component with Suspense in your functional component as such:

<Suspense fallback={<div>Loading...</div>}>
  <Line {...config} />
</Suspense>

[wolfcreative]

There are 2 possible solutions, if you are using NEXT.

If there are any imports in your project from antd/plots, make all of them as dynamic import. the only way to fix cjs problem if you are using next is to import them using dynamic imports https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic

or write the following line in your package json to override the dependencies of your antd plot dependency. This bug is related to this silly path-util library that are used internally by one of antd plot dependencies g2. it's latest update makes it to be used by esm only. antvis/util#99 one of the possible ways to make your next app functional again is to override it by downgrading antd/plot dependencies to stable version.

  "overrides": {
    "@antv/g-base": "0.5.11",
    "@antv/path-util": "2.0.15"
  }

Thank you! Solved the problem with "output: 'standalone'" in next.js