createReactContext breaks with Webpack 5 & relay-hooks 5.x (ESM)

[cedrickring]

For some reason, webpack introduced a "fake namespace object" which is provided first to createReactContext. When the actual module is loaded, the real react object will be passed to createReactContext resulting in the invariant failing here.

I don't really know how to provide a workaround for that.

[morrys]

Hi @cedrickring,
can you create an example project on github where the error is reproduced?
So I can analyze it.

Thanks

[stan-sack]

I've got this too. just blew up my site in prod

[stan-sack]

@cedrickring rolling back to 4.2.0 fixed it for me.

[morrys]

The problem is caused by the version 5.x of webpack (not in version 4), in practice for this type of import webpack enter here https://github.com/webpack/webpack/blob/main/lib/RuntimeTemplate.js#L775-L788 and the react variable is saved in another variable managed by webpack.

I tried replacing that piece of code with return $ {importVar}; and everything works fine.

I'd like to hear from a Webpack maintainer (@sokra) and / or open an issue in their repository.

@cedrickring rolling back to 4.2.0 fixed it for me.

This problem is present in relay-hooks version 5.x as ESM support has been added

[morrys]

Version 5.0.1 released which resolves this issue.

@stan-sack @cedrickring let me know if there are other problems or if it works so I proceed to close the issue 👍

[cedrickring]

Works great! I'll close this issue as #195 fixed this issue 👍🏽

[sokra]

The fake namespace object is needed for CommonJs-ESM-interop. React is a commonjs module, but import * as xxx gives a esm namespace object (which has an additional default property here).

But you are right webpack doesn't behaves fully spec-complient here. Calling import * as xxx from multiple modules should always return the same esm namespace object, but it doesn't in webpack. I never thought someone would check the identity of these objects.

Fixing that in webpack would be a bit more involved, since we probably have to cache the namespace object somewhere globally (probably in the module object)...

[morrys]

Hi @sokra,
Thank you for your answer 👍
I didn't open an issue in webpack just because I imagined that fixing it in webpack would be more complex and risky.

I never thought someone would check the identity of these objects.

I understand you, thinking about everything is almost impossible, luckily some problems have simple solutions :)