ERR_REQUIRE_ESM Error When Refreshing the Page in NextJS with Nivo

Question

I am using nivo/core and bar, line, and pie components with a NextJS react environment. I am getting this error on refresh that makes it seem like it's related to the Nivo's dependency package: Error: require() of ES Module /node_modules/d3-interpolate/src/index.js from node_modules/@nivo/core/dist/nivo-core.cjs.js not supported. Instead change the require of index.js in /node_modules/@nivo/core/dist/nivo-core.cjs.js to a dynamic import() which is available in all CommonJS modules.

I saw this issue with version 0.84, I just updated the packages to 0.85.1 but still see the same error. Is there any fix or workaround for this issue?

Node ver: 16.15.0 Next ver: 12.1.6

next.config.js:

module.exports = {
webpack(config) {
config.module.rules.push({
test: /.svg$/,
use: ["@svgr/webpack"],
});
return config;
},
transpilePackages: ["@nivo"],
experimental: {
esmExternals: "loose",
},
};

Thank you.

I've tried enabling esmExternals in nextjs.config. I also tried dynamically importing the Nivo library.

---

Updated next.config.js using next-transpile-modules:

const transpileModules = require("next-transpile-modules");

const withTM = transpileModules([
  "d3-array",
  "d3-color",
  "d3-format",
  "d3-interpolate",
  "d3-time",
  "d3-time-format",
  "@nivo/core",
  "@nivo/line",
]);

const nextConfig = withTM({
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
  experimental: {
    esmExternals: "loose",
  },
  transpilePackages: [
    "@nivo",
    "d3-array",
    "d3-color",
    "d3-format",
    "d3-interpolate",
    "d3-time",
    "d3-time-format",
    "@nivo/core",
    "@nivo/line",
  ],
});

module.exports = nextConfig;