Code precompiled with react compiler doesn't work in NextJS

[faradaytrs]

Background

We have encountered a critical issue related to the Next.js React runtime compatibility after upgrading our monorepo to React 19. Despite following the officially recommended approach to precompile dependencies using React, the issue has left us unsure of the best way to handle it. vercel/next.js#73797

Key Points:

1. We use a monorepo setup that includes:

• Several UI kit libraries precompiled with babel-plugin-react-compiler.
• A Next.js project that depends on these precompiled libraries.

2. React Compiler Usage:

• We previously relied on the react-compiler-runtime polyfill when using React 18, and everything worked fine.
• After upgrading to React 19 and removing the polyfill (since it is no longer supported), the Next.js project now fails to build due to runtime incompatibility.

3. Next.js Experimental Compiler:

• We intentionally avoided using the experimental React Compiler feature in Next.js to retain control over our precompiled dependencies.

The Problem

1. Precompiling Dependencies as Recommended:
   Following the official guidance, we precompiled our UI kit libraries using the React Compiler before building the Next.js project. However, after upgrading, build failures occur during prerendering.
2. Disabling prerendering results in runtime errors due to React runtime incompatibility.
   Attempting the Next.js Experimental Compiler:
   To investigate, we disabled the precompilation step for our dependencies and enabled the Next.js experimental React Compiler feature. Surprisingly, this approach worked, and the project built and ran without issues.
   However, this is contrary to the recommended practices and does not align with how we intended to structure and optimize our setup.

Conclusion

This situation has been a frustrating discovery, as it leaves us stuck between following official recommendations and a solution that technically works but contradicts best practices. We are eager to resolve this issue and would greatly appreciate clarity and guidance from the community or Next.js maintainers.

[poteto]

I'm not sure I'm following what the issue is exactly, could you provide a repro? If I'm understanding correctly, you still need to use the react-compiler-runtime dependency if you have precompiled those libraries, even if your app is on React 19. The polyfill will not be used (since React 19 natively has the compiler runtime APIs) but is still a necessary peer dependency from the pre-compiled libraries.

[faradaytrs]

[faradaytrs]

I have no idea what is H and why it's undefined

[faradaytrs]

As i can see although i specify stable react version in dependencies, when i start nextjs it uses react-dom@19.0.0-rc-7283a213-20241206 renderer

[faradaytrs]

I found H here, not sure if it's the right "H"

[faradaytrs]

@poteto here is the reproduction https://codesandbox.io/p/devbox/frosty-bird-xx8pz9