Remix.run and Nivo charts

Question

I have a problem using Nivo charts with remix.run. Can't compile, error:

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\tomer\Code\remix-es\node_modules\d3-color\src\index.js from C:\Users\tomer\Code\remix-es\node_modules\@nivo\colors\dist\nivo-colors.cjs.js not supported.
Instead change the require of index.js in C:\Users\tomer\Code\remix-es\node_modules\@nivo\colors\dist\nivo-colors.cjs.js to a dynamic import() which is available in all CommonJS modules.

Well according to this: link, I have to add packages to serverDependenciesToBundle. Here is snippet from remix.config.js:

module.exports = {
  tailwind: true,
  ignoredRouteFiles: ["**/.*"],
  serverDependenciesToBundle: ["d3-color", "d3", "@nivo"],

What is wrong here...

Answer 1

I have a tool that will return the list of ESM packages to add to serverDependenciesToBundle

https://github.com/kiliman/rmx-cli#-get-esm-packages

npx rmx-cli get-esm-packages @nivo/core @nivo/bar

Returns

🔨 Add the following dependencies to your serverDependenciesToBundle

"@nivo/annotations",
"@nivo/axes",
"@nivo/bar",
"@nivo/colors",
"@nivo/core",
"@nivo/legends",
"@nivo/recompose",
"@nivo/scales",
"@nivo/tooltip",
"@react-spring/animated",
"@react-spring/core",
"@react-spring/shared",
"@react-spring/types",
"@react-spring/web",
"d3-array",
"d3-color",
"d3-format",
"d3-interpolate",
"d3-path",
"d3-scale",
"d3-scale-chromatic",
"d3-shape",
"d3-time",
"d3-time-format",
"internmap",
"react-lifecycles-compat"

You can also simplify by using Regex:

[ /@nivo\/.+/, /d3-.+/ ]