Can't import d3-geo package into Node.js TypeScript project

Question

I'm trying to create code to test whether specific latitude/longitude coordinates can be found within various GeoJSON Features.

If I do this:

import d3 from 'd3-geo'; // or: import * as d3 from 'd3-geo' // makes no difference

console.log(d3.geoContains);

...run using: node --require ts-node/register app.ts

...I get this error:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/kshetline/temp/geo/node_modules/d3-geo/src/index.js from /Users/kshetline/temp/geo/app.ts not supported. Instead change the require of index.js in /Users/kshetline/temp/geo/app.ts to a dynamic import() which is available in all CommonJS modules. at Object. (/Users/kshetline/temp/geo/app.ts:6:34) at Module.m._compile (/Users/kshetline/temp/geo/node_modules/ts-node/dist/index.js:735:29) at Object.require.extensions. [as .ts] (/Users/kshetline/temp/geo/node_modules/ts-node/dist/index.js:737:16) { code: 'ERR_REQUIRE_ESM' }

So I try using import() as suggested by the error message:

import('d3-geo').then(d3 => console.log(d3.geoContains));

...that just gets me a shorter, but similar, error message:

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/kshetline/temp/geo/node_modules/d3-geo/src/index.js from /Users/kshetline/temp/geo/app2.ts not supported. Instead change the require of index.js in /Users/kshetline/temp/geo/app2.ts to a dynamic import() which is available in all CommonJS modules. at /Users/kshetline/temp/geo/app2.ts:21:43 { code: 'ERR_REQUIRE_ESM' }

I've tried different module types and targets in tsconfig.json, but that hasn't helped. Here's the tsconfig.json from the stripped-down test project I created to demonstrate this problem:

{
  "compilerOptions": {
    "target": "es2021",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

And here's the package.json:

{
  "name": "geo",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "d3-geo": "^3.0.1"
  },
  "devDependencies": {
    "@types/d3-geo": "^3.0.2",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.5"
  }
}

I've never run into an npm library that gave me this much trouble trying to do a simple import. I can make it work in plain JavaScript, but even then it has to be a dynamic import(), which is an annoying way to have to consume a library.

Any ideas how to make this work better?

Answer 1

I don't have a satisfactory answer yet, but at least I have a stupid work-around. I've set "allowJs": true in my tsconfig.json file, added a JavaScript file called module-bridge.cjs like this:

module.exports = {
  d3_geo: async function () { return import('d3-geo'); }
};

Then I put this in my TypeScript code:

import { d3_geo } from './module-bridge.cjs';

// ...

const geoContains = (await d3_geo()).geoContains;

You'd think I could just use import('d3-geo') directly in my TypeScript code, but that produces a compilation error.

Answer 2

for me it helped to downgrade to 2.0.2 and importing it via

import * as d3Geo from 'd3-geo';