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...
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-.+/ ]