[ERR_REQUIRE_ESM]: require() of d3-geo is not supported. Instead change the require of index.js in `/three-geojson-geometry/dist/three-geojson-geometry.common.js` to a dynamic import() which is available in all CommonJS modules.

[Krasivaya]

Having issue with importing.

error - Error [ERR_REQUIRE_ESM]: require() of ES Module /d3-geo/src/index.js from /three-geojson-geometry/dist/three-geojson-geometry.common.js not supported.
Instead change the require of index.js in /three-geojson-geometry/dist/three-geojson-geometry.common.js to a dynamic import() which is available in all CommonJS modules.

using version 2.24.4

[vasturiano]

@Krasivaya are you intentionally requiring the commonJs version of the library? If you need the ES modules version you should be using the module entry point, not the main one. https://github.com/vasturiano/three-globe/blob/bc8492286aebc27d6bc875aafb0254e0964f9242/package.json#L7

[alexbjorlig]

I also get this error. Should I change the import statements?

error

web:build: RequestId: '7Fi6' - unhandled error. require() of ES Module /Users/alexbjorlig/Documents/Github/eddystone/node_modules/d3-geo/src/index.js from /Users/alexbjorlig/Documents/Github/eddystone/node_modules/three-geojson-geometry/dist/three-geojson-geometry.common.js not supported.
web:build: Instead change the require of index.js in /Users/alexbjorlig/Documents/Github/eddystone/node_modules/three-geojson-geometry/dist/three-geojson-geometry.common.js to a dynamic import() which is available in all CommonJS modules.
web:build: /Users/alexbjorlig/Documents/Github/eddystone/node_modules/three-geojson-geometry/dist/three-geojson-geometry.common.js:7
web:build: var d3Geo = require('d3-geo');
web:build:             ^
web:build: 
web:build: [Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/alexbjorlig/Documents/Github/eddystone/node_modules/d3-geo/src/index.js from /Users/alexbjorlig/Documents/Github/eddystone/node_modules/three-geojson-geometry/dist/three-geojson-geometry.common.js not supported.
web:build: Instead change the require of index.js in /Users/alexbjorlig/Documents/Github/eddystone/node_modules/three-geojson-geometry/dist/three-geojson-geometry.common.js to a dynamic import() which is available in all CommonJS modules.] {
web:build:   code: 'ERR_REQUIRE_ESM'
web:build: }

relevant-code

    import ThreeGlobe from 'three-globe';
    import countries from './_globe.min.json';
    import { WebGLRenderer, Scene } from 'three';
    import { PerspectiveCamera, AmbientLight, DirectionalLight, Color, PointLight } from 'three';
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

[Michelangelo-Granato]

also having this issue on import of three-globe, how can I resolve?

[vasturiano]

@alexbjorlig given that you're loading the module as import statement (which should then be using the ES modules target), are you perhaps using a framework that is using SSR, and would be possibly requiring the module in parallel via the commonJs target, for the server-side portion? An example of such frameworks is NextJs, but there are others.

Just in case that's the issue, you should bypass SSR when importing this module, it's not meant to be compatible with server-side processes, given the strong emphasis on DOM related functionality.

[alexbjorlig]

Thank you so much! I am indeed using Sveltekit. Moving the import of three-globe into the onMount solved the issue 👍

[ineshbose]

Still having this issue with Nuxt 3 (making use of script setup)! Perhaps this would be helpful - https://v3.nuxtjs.org/guide/concepts/esm/#library-author-guide