Importing Issues - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module

[infinity]

node: v16.1.0
TypeScript: v4.3.4
d3-array: v3.0.1

I managed to get d3-array working properly without using TypeScript in project I'm testing; however, I'm having issues refactoring the same project using TypeScript because of an import issue I'm having with d3-array.

PS E:\Documents\Code\NodeJS\test\d3-array-testing> .\node_modules.bin\ts-node .\src\main.ts
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: E:\Documents\Code\NodeJS\test\d3-array-testing\node_modules\d3-array\src\index.js
require() of ES modules is not supported.
require() of E:\Documents\Code\NodeJS\test\d3-array-testing\node_modules\d3-array\src\index.js from E:\Documents\Code\NodeJS\test\d3-array-testing\src\ArrayUtils.ts 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 E:\Documents\Code\NodeJS\test\d3-array-testing\node_modules\d3-array\package.json.

at new NodeError (node:internal/errors:363:5)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1112:13)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:816:12)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:93:18)
at Object.<anonymous> (E:\Documents\Code\NodeJS\test\d3-array-testing\src\ArrayUtils.ts:1:1)
at Module._compile (node:internal/modules/cjs/loader:1095:14)
at Module.m._compile (E:\Documents\Code\NodeJS\test\d3-array-testing\node_modules\ts-node\src\index.ts:1295:23)
at Module._extensions..js (node:internal/modules/cjs/loader:1124:10)

PS E:\Documents\Code\NodeJS\test\d3-array-testing>

--

I've been following the closed issues in this repo and other issues on the same subject and was led to two pages with possible solutions:

1. https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
   - This didn't help me much and I was still faced with other issues
2. TypeStrong/ts-node#1007
   - After following this solution, I stopped getting that error or any other from the first solution page.
   - However, now I was met with another issue in which Node wasn't happy with my CommonJS packages such as node-postgres and asking me to import it a different way.

--

I've went ahead implemented the second solution so the problem isn't an issue anymore. Nonetheless, I was wondering if this issue is with Node itself, or if there is a way to mitigate it within d3-array to resolve the ESM issue?

[Mike Bostock]

Sorry, but I can’t help with this. Good luck.

[Jesse]

@Infinitay This is an issue in Node when you try to use require with an ESM module. In order for this to work, you have to use import. @mbostock the changes made here https://github.com/d3/d3-array/pull/202/files mean that you cannot do this in Node.js anymore const d3 = require('d3-array');

[Jesse]

Relevant issue here #221

[Jason Li]

will This be solved?

[Mike Bostock]

@wemod123 This is working as intended. Please read the release notes and comments above.

[Sérgio Junior]

I had this problem importing a chart that uses D3 in a Next JS project. I solved it by importing on the client-side with the dynamic package.

import dynamic from 'next/dynamic';

const Lines = dynamic(() => import('components/charts/Lines'), { ssr: false });

[LiesAuer]

not working here, ts-node's issue maybe?

import { max, min } from 'd3-array';

export default function() {
    // my code
}

F:\Projects\test\node_modules\ts-node\dist\index.js:851
            return old(m, filename);
                   ^
Error [ERR_REQUIRE_ESM]: require() of ES Module F:\Projects\test\node_modules\d3-array\src\index.js from F:\Projects\test\src\technical-indicator\stochasticOscillator.ts not supported.
Instead change the require of index.js in F:\Projects\test\src\technical-indicator\stochasticOscillator.ts to a dynamic import() which is available in all CommonJS modules.
    at Object..js (F:\Projects\test\node_modules\ts-node\dist\index.js:851:20)
    at Object.<anonymous> (F:\Projects\test\src\technical-indicator\stochasticOscillator.ts:6:18)
    at Module._compile (F:\Projects\test\node_modules\ts-node\dist\index.js:857:29)
    at Object..ts (F:\Projects\test\node_modules\ts-node\dist\index.js:859:16)
    at Object.<anonymous> (F:\Projects\test\src\bot.ts:86:46)
    at Module._compile (F:\Projects\test\node_modules\ts-node\dist\index.js:857:29)
    at Object..ts (F:\Projects\test\node_modules\ts-node\dist\index.js:859:16)
    at Object.<anonymous> (F:\Projects\test\src\index.ts:4:13)
    at Module._compile (F:\Projects\test\node_modules\ts-node\dist\index.js:857:29)
    at Object..ts (F:\Projects\test\node_modules\ts-node\dist\index.js:859:16) {
  code: 'ERR_REQUIRE_ESM'
}

[Curran Kelleher]

Maybe try the suggestion in the error and see if it works?

change the require of index.js in F:\Projects\test\src\technical-indicator\stochasticOscillator.ts to a dynamic import()