Incompatibility of react-compiler-runtime with Vite app

[thomasKn]

See pull request #2682 for updates on this issue.

What is the location of your example repository?

https://github.com/frontvibe/hydrogen-visual-editing

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

2024.10.0

What version of Remix are you using?

2.15.0

Steps to Reproduce

1. Clone https://github.com/frontvibe/hydrogen-visual-editing
2. Install dependencies
3. Run pnpm run dev

Expected Behavior

It would be beneficial for Hydrogen to provide built-in support for react-compiler-runtime to ensure compatibility with the latest versions of libraries like Sanity. This would enhance the developer experience and prevent the need for manual configuration.

Actual Behavior

Description:

I am experiencing issues with the integration of the react-compiler-runtime in my Hydrogen Vite application. The latest version of Sanity now utilizes react-compiler-runtime, but it does not work correctly with Hydrogen at this time.

Background:

The react-compiler-runtime is an official React package, similar to react-dom, and is CommonJS (CJS). Hydrogen and other ESM-native frameworks require special handling for these CJS libraries, and it seems that additional support is needed to accommodate this integration.

Error log

MiniOxygen encountered an error while running your app's entry point:

ReferenceError: require is not defined

To investigate the issue, examine this stack trace:
at (../../../../../../node_modules/.pnpm/[email protected][email protected]/node_modules/react-compiler-runtime/dist/index.js?v=c402fdd6:16)
at (../../../../../../node_modules/.pnpm/@[email protected]_@[email protected][email protected]_react@18_gorjzvzh6ncycqqaccq7myh23u/node_modules/@sanity/visual-editing/dist/remix/index.js?v=c402fdd6:2)
at (../../../../../../app/root.tsx:8)