ERR_REQUIRE_ESM — not fixable with serverDependenciesToBundle nor ClientOnly

[blazing halo]

Hi! I'm trying to use this package https://github.com/vasturiano/react-globe.gl#react-globegl with my Remix app, but unfortunately running into the ERR_REQUIRE_ESM error on:

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

I have tried running npx rmx-cli get-esm-packages react-globe.gl, which found nothing, but I added "three" and "react-globe.gl" to the serverDependenciesToBundle anyways which didn't change anything.

I also tried using the ClientOnly utility component:

return <ClientOnly>{() => <Globe />}</ClientOnly>;

But this also did not change anything. Was wondering if anyone might have other ideas — right now it seems like I'll have to make my own globe 😵‍💫 Thank you!

[hollow canyon]

@blazing halo did you see this?

import dynamic from 'next/dynamic';
...
const Globe = dynamic(import('react-globe.gl'), { ssr: false });

This is a next JS example

But possibly we can do something similar?

[blazing halo]

@hollow canyon I did! I thought the similar option would be to try what I did, but maybe there's another option!

[hollow canyon]

Let me give it a go too, we're also curious about using this library

I have react 18 working with Framer motion, three Js and drei in Remix

in another branch

[blazing halo]

I do have a small separate three.js component that works without anything extra, i.e. no serverDependenciesToBundle, ClientOnly, etc.

edit: to clarify, using react three fiber in my other component

It's specifically the react-globe.gl causing me problems

[lyric dagger]

Take a look
https://stackblitz.com/edit/node-nh54nt?file=app%2Froutes%2Findex.tsx,remix.config.js,package.json

[hollow canyon]

Got it working

[lyric dagger]

Yeah, took react 18 plus suspense.

[lyric dagger]

Truly is dark magic.

[hollow canyon]

Nope

React 17

working

[lyric dagger]

Oh nice, I got a weird suspense error. What worked?

[blazing halo]

it works!

[hollow canyon]

    let Globe = () => null;
    if (typeof window !== "undefined") Globe = require("react-globe.gl").default;

(Also I didn't need server dependencies with this window check)

[lyric dagger]

ah

[hollow canyon]

return(<Globe/>)

^works

You can easily make a component with the 3 lines of code there

without needing suspense

[blazing halo]

awesome just tried yours as well

I was trying to do something with typeof window !== 'undefined' but clearly not the right thing! thank you!

[hollow canyon]

And it supports react 17, I am not familiar enough with this lib to say all the functionality works. But it let me drag the world around

Awesome, nice work everyone. haha.

[lyric dagger]

My suspicion is this package is CommonJS, but it's package modules are set wrong so Remix doesn't know what to do with it.

[hollow canyon]

Next also fails the same way

There's some explanation on Github as to why they both fail

But it's something with an underlying lib using window to check if canvas is available or something odd

[urban bough]

Cooool

[urban bough]

would love to see the code you are working with 🙂 did you get it figured out?