A problem with pReact and react-kapsule script in a production environment

[deemeetree]

Describe the bug I'm using this module in my pReact Parcel-packed app (using latest versions of everything and Node 18) and it works fine on the local machine.

However, when I upload it to Vercel, I get this error in the console.log of the browser, as soon as I attempt to load <ForceGraph3D>:

react-kapsule.mjs:94 Uncaught (in promise) ReferenceError: $e21355414fd2bd2a$exports is not defined
    at react-kapsule.mjs:94:17
    at E.n [as constructor] (forwardRef.js:30:10)

Maybe you haver encountered this problem before and know how to fix it?

Of course, I could also move from pReact to React and the problem would possibly disappear, but I'm wondering what kind of compatibility issue it may be especially that it's not the first time the react-kapsule model is "misbehaving" with React (see a reference to the issue below). Maybe there's a deeper problem with that and it would be interesting to look into it to avoid future issues when the next versions of React are released.

To Reproduce Steps to reproduce the behavior:

1. Go to https://infranodus-graph.vercel.app/
2. Open the browser's console log
3. See error

Expected behavior It loads fine on my local machine, which has exactly the same configuration and the same package-lock, the same node.js version.

System (please complete the following information): See above.

Additional context I looked up the error and saw that the react-kapsule module had a compatibility issue with React 18 issue 379 in 2022, but that it has been resolved since.

I expect the problem may be because I'm using pReact and not React, but then this module installs its own React 18, so I don't understand why this should be an issue.

Also, it's not clear why I'm not having this problem in an absolutely identical environment on my local machine but I face this problem on Vercel.

[vasturiano]

@deemeetree I'm not sure why this is happening, and it's difficult to replicate your exact setup. But it vaguely sounds like it could be related to using CommonJS instead of ESM to import the modules. Perhaps related to the SSR mode. These modules do not have CommonJS bindings, only ESM. So I would check first whether your whole dependency tree is being always imported as ESM.

[mneunomne]

Was able to reproduce this issue locally + the solution I found was to change react-kapsule to be compatible with preact directly, substituting the react hooks in react-kapsule with preact ones:

import { h } from 'preact';

import {
  useState,
  useEffect,
  useLayoutEffect,
  useRef,
  useMemo,
  useCallback,
  useImperativeHandle
} from 'preact/hooks';

Created a separate repo for this https://github.com/mneunomne/preact-kapsule, perhaps the easiest solution is having a separate package for preact compatibility?

But I'm no react expert, maybe there is another solution without having to make separate repo.

[deemeetree]

@mneunomne great work! I'm just curious if this could be solved without maintaining a separate repo. Maybe some checks inside the existing repo to see if useRef is throwing an error and therefore falling back on preact for instance?