require() of ES Module /node_modules/three/examples/jsm/renderers/CSS2DRenderer.js from /workspace/storie/spacex/node_modules/globe.gl/dist/globe.gl.common.js not supported. Instead change the require of CSS2DRenderer.js in /node_modules/globe.gl/dist/globe.gl.common.js to a dynamic import() which is available in all CommonJS modules

[chientrm]

Describe the bug

require() of ES Module /node_modules/three/examples/jsm/renderers/CSS2DRenderer.js from /workspace/storie/spacex/node_modules/globe.gl/dist/globe.gl.common.js not supported. Instead change the require of CSS2DRenderer.js in /node_modules/globe.gl/dist/globe.gl.common.js to a dynamic import() which is available in all CommonJS modules

To Reproduce Steps to reproduce the behavior:

1. npm init
2. Add 'type': 'module' to package.json
3. npm run build using vite

Expected behavior Build distribution

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser: [e.g. Chrome, Safari]
• Version: [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser: [e.g. stock browser, Safari]
• Version: [e.g. 22]

Additional context Add any other context about the problem here.

[rasmusfredrik]

Hello, we resolved the issue using a dynamic import in Next Js const ReactGlobe = dynamic(import('react-globe.gl'), { ssr: false })

[chientrm]

Hello, we resolved the issue using a dynamic import in Next Js const ReactGlobe = dynamic(import('react-globe.gl'), { ssr: false })

I resolved this by dynamic import in svelte, too. 👍

[stefanreifenberg]

hey @chientrm I would love to see how you implemented globe.gl in svelte. Cheers

[chientrm]

hey @chientrm I would love to see how you implemented globe.gl in svelte. Cheers

I no longer use globe.gl. Please check my three-js globe I implemented myself 👍 . https://github.com/chientrm/spacex/blob/main/src/lib/components/Globe.svelte