Build error occurred: require() of ES modules is not supported

[benja135]

Hello,

I followed the tutorial to install Umami and I have the following error when I try to build (npm run build):

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\Benjamin\Documents\Développement\umami\node_modules\d3-array\src\index.js
require() of ES modules is not supported.
require() of C:\Users\Benjamin\Documents\Développement\umami\node_modules\d3-array\src\index.js from C:\Users\Benjamin\Documents\Développement\umami\node_modules\d3-geo\dist\d3-geo.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\Benjamin\Documents\Développement\umami\node_modules\d3-array\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at C:\Users\Benjamin\Documents\Développement\umami\node_modules\d3-geo\dist\d3-geo.js:3:81
    at Object.<anonymous> (C:\Users\Benjamin\Documents\Développement\umami\node_modules\d3-geo\dist\d3-geo.js:6:2)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32) {
  type: 'NodeError',
  code: 'ERR_REQUIRE_ESM'
}

I have the same problem on two different environments.
Node v14.17.0
Npm 7.16.0

[mikecao]

Can you try using a different version of node?

[bpongy]

Same error.
Node v12.20.0
Npm 7.16.0

[RK-BAKU]

Same error while trying to update to v 1.18:

node - v14.17.0
npm - 6.14.13

> Build error occurred
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /home/umami-1.18.0/node_modules/d3-array/src/index.js
require() of ES modules is not supported.
require() of /home/umami-1.18.0/node_modules/d3-array/src/index.js from /home/umami-1.18.0/node_modules/react-simple-maps/node_modules/d3-geo/dist/d3-geo.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/umami-1.18.0/node_modules/d3-array/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1085:13)
    at Module.load (internal/modules/cjs/loader.js:933:32)
    at Function.Module._load (internal/modules/cjs/loader.js:774:14)
    at Module.require (internal/modules/cjs/loader.js:957:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at /home/umami-1.18.0/node_modules/react-simple-maps/node_modules/d3-geo/dist/d3-geo.js:3:81
    at Object.<anonymous> (/home/umami-1.18.0/node_modules/react-simple-maps/node_modules/d3-geo/dist/d3-geo.js:6:2)
    at Module._compile (internal/modules/cjs/loader.js:1068:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
    at Module.load (internal/modules/cjs/loader.js:933:32) {
  type: 'NodeError',
  code: 'ERR_REQUIRE_ESM'
}

[wowi42]

Same here

[mIcHyAmRaNe]

this is due to the new d3-array update

so to resolve the build error, downgrade d3-array:

• add "d3-array": "^2.12.1" to "devDependencies" in packages.json
• then run npm install

[walela]

this is due to the new d3-array update

so to resolve the build error, downgrade d3-array:

• add "d3-array": "^2.12.1" to "devDependencies" in packages.json
• then run npm install

worked for me, thanks!

[benja135]

Indeed, it works! Thank you!

[wowi42]

PR Done #701

[mIcHyAmRaNe]

personally i'm not fan of that PR,
i just share the fix here rather than opening a PR because, i think that's a temporary fix

we need to fix that while having newer version of dependencies
and if needed, we open an issue in the concerned dependency to discuss about a bug with it's developers to find a solution.

[mikecao]

I would like to know why this error is occurring. I get that d3-array changed their package to type: "module", but I'd like to know the root cause. Maybe it's an issue with the Next.js build command. I don't think continuing to add problematic packages to package.json will solve it in the long run since there may be other packages in the future that declare type: "module" as well.

[mikecao]

Looks like this is an issue with Next.js, vercel/next.js#23725

[wowi42]

@mIcHyAmRaNe @mikecao what could be a good solution is to not use ^ or ~ and stick to strict versions. If everybody was doing this small effort (including in 3rd parties like next), this would not happen...

[mikecao]

Looks like this is fixed from the upgrade to Next.js 12.