Undefined "global" variable

[jessapp]

Problem

I need to use react-live in my Remix app. When I try to use their components, I get the following error:

See this repository for a reproduction (go to this file to see the react-live code).

The stack trace in my browser console leads me back to react-simple-code-editor, which is used under the hood by react-live. It seems that react-simple-code-editor expects the variable global to be defined, but it is not defined within the context of my Remix app.

I'm not totally clear on why global is not defined, but I believe it could possibly have something to do with Node Javascript vs browser Javascript.

Solutions I have tried

Because I suspect this may have something to do with Node JS vs browser JS, I tried to install @remix-run/node, as per this discussion. This didn't fix the issue.

Does anybody know why global is undefined, and how I can move past this error? Thank you!

[sergiodxa]

The global object is a Node only thing. It doesn’t exists on the browser.

I think webpack does change global to window or globalThis, but since Remix doesn’t use webpack that doesn’t work, and most likely that package was coded expecting webpack specific and non standard behavior.

I would open an issue on their repository to ask them to use window or globalThis.