Hey @BruceHubbard , solid question—React Compiler's React 18 setup trips folks up since it defaults to 19 mode.
Quick fix:
-
Install the runtime:
npm install react-compiler-runtime@latest -
Update
next.config.mjslike this (options pass straight to the Babel plugin):/** @type {import('next').NextConfig} */ const nextConfig = { reactCompiler: { target: '18', runtimeModule: 'react-compiler-runtime', }, // your other stuff }; export default nextConfig;
-
Grab the plugin if missing:
npm install -D babel-plugin-react-compiler@latest -
Restart dev server. That should kill the import error. Works for Pages Router too (docs lag a bit).
If Turbopack's in play and it still flakes, add the alias @icyJoseph shared.
GitHub
github.com › facebook › react › blob › main › compiler › packages › react-compiler-runtime › src › index.ts
react/compiler/packages/react-compiler-runtime/src/index.ts at main · facebook/react
* This validation throws on unsound inputs at runtime. * * Components should only be invoked through React as React Compiler could memoize · * the call to AnotherComponent, introducing conditional hook calls in its · * compiled output. * ```js · * function Invalid(props) { * const myJsx = AnotherComponent(props); * return <div> { myJsx } </div>; * } * * Hooks must be named as hooks.
Author facebook
GitHub
github.com › facebook › react › tree › main › compiler › packages › react-compiler-runtime
react/compiler/packages/react-compiler-runtime at main · facebook/react
Backwards compatible shim for runtime APIs used by React Compiler.
Author facebook
How to enable React Compiler for React 18 Page Router Application?
Those instructions have us install npm install react-compiler-runtime@latest and then you have to pass a target flag to React Compiler. How do we do that within Next.js? It looks like from Next's React Compiler's docs we don't manually set up the babel-plugin-react-compiler manually, I'm guessing ... More on github.com
3
3
December 3, 2025react-compiler-runtime with vite
Hi all 👋 . I just saw the beta announcement and am super excited about it. I want to try the new compiler runtime since we are on React 18.2. I'm running into issues when starting the vite dev ... More on github.com
1
1
October 30, 2024[Compiler Bug]: Upgrading to react compiler runtime 19.0.0-beta-63e3235-20250105 breaks app built with Vite + React Route v7
What kind of issue is this? React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization) babel-plugin-react-compiler (build issue installing or using the Babel plugin) eslint-plugin-react-compiler (b... More on github.com
3
January 7, 2025Introducing React Compiler – React
One ever present debate in the React community had been whether you should `useMemo`/`useCallback` all non-primitive props or not. I've often taken the position that you should in real world teams because it's too much work to determine exactly when to otherwise , whereas others argue that it's too much runtime overhead (and noise) and not worth it. u/acemarke has a good summary of the arguments . All that to say, I was curious if this compiler is essentially the React team conceding that you _should_ memoize everything. The answer is pretty interesting - the compiler actually memoizes things in a more efficient way than `useMemo` can . So it's almost the best of all worlds: improved rendering performance from memoization, cheaper memoization cost, and none of the noise of `useMemo`s sprinkled everywhere. I think we'll have to wait a bit longer to see if this works out in practice, and I'm not crazy about having to add another layer of transpilation, but if it works well this will be a pretty big win for React projects in general I think. More on reddit.com
55
308
May 15, 2024Videos
15:10
What you need to know about the React Compiler, by João Vogler ...
How to speed up your react-router apps with react-compiler
01:15:46
Optimizing React Components with the React Compiler in V18 - YouTube
React Compiler: It's Stranger Than You Think
15:16
React Compiler: In-Depth Beyond React Conf 2024 - YouTube
37:16
React's Magic Compiler You Can't Use (Yet) - YouTube
React
react.dev › learn › react-compiler
React Compiler – React
When things don’t work as expected, use our debugging guide to understand the difference between compiler errors and runtime issues, identify common breaking patterns, and follow a systematic debugging workflow.
GitHub
github.com › reactwg › react-compiler › discussions › 7
Debugging · reactwg/react-compiler · Discussion #7
Although React Compiler has been in use in production at Meta in many high traffic applications, it is still experimental for open source due to differences in tech stacks, so bugs and errors may happen at runtime in your application.
Author reactwg
GitHub
github.com › reactwg › react-compiler › discussions › 30
react-compiler-runtime with vite · reactwg react-compiler · Discussion #30
October 30, 2024 - I verified that react-compiler-runtime is installed as a direct dependency "react-compiler-runtime": "^19.0.0-beta-6fc168f-20241025",
Author reactwg
GitHub
github.com › facebook › react › blob › main › compiler › packages › babel-plugin-react-compiler › src › Entrypoint › Options.ts
react/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Options.ts at main · facebook/react
* or higher, the compiler emits direct imports of React runtime APIs needed by the compiler. On · * versions prior to 19, an extra runtime package react-compiler-runtime is necessary to provide · * a userspace approximation of runtime APIs. */ target: CompilerReactTarget; }>; ·
Author facebook
GitHub
github.com › trueadm › react-compiler
GitHub - trueadm/react-compiler: An experimental React compiler for typed function component trees
September 21, 2022 - There's a small DOM runtime that shows the basics working. This can be found browser-sandbox. If you want to make changes, you can modify the starting entry point in browser-sandbox/compiled.js.
Starred by 128 users
Forked by 12 users
Languages JavaScript 99.9% | JavaScript 99.9%
GitHub
github.com › facebook › react › issues › 32011
[Compiler Bug]: Upgrading to react compiler runtime 19.0.0-beta-63e3235-20250105 breaks app built with Vite + React Route v7 · Issue #32011 · facebook/react
January 7, 2025 - [vite] Error when evaluating SSR module /app/root.tsx: failed to import "react-compiler-runtime" |- /Users/rishabhsharma/Projects/react-router-v7/node_modules/.pnpm/react-compiler-runtime@19.0.0-beta-63e3235-20250105_react@19.0.0/node_modules/react-compiler-runtime/dist/index.js:17 import * as React from "react"; ^^^^^^ SyntaxError: Cannot use import statement outside a module at wrapSafe (node:internal/modules/cjs/loader:1378:20) at Module._compile (node:internal/modules/cjs/loader:1428:41) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1548:10) at Module.load (node:intern
Author rishitells
Reddit
reddit.com › r/reactjs › introducing react compiler – react
r/reactjs on Reddit: Introducing React Compiler – React
May 15, 2024 - I am working on my first react ... (https://github.com/nyendwa/React-Signup). However, though everything looks okay, I am not sure why I am unable to populate my database, I am asking experienced developers to look at my work and point out any missing pieces from my project. Your reviews will greatly put me on a path of great success as a self-taught developer. ... I’d hardly call it a compiler, but I guess ...
npm
npmjs.com › package › react-compiler-runtime
react-compiler-runtime - npm
Backwards compatible shim for runtime APIs used by React Compiler. Primarily meant for React versions prior to 19, but it will also work on > 19. See also https://github.com/reactwg/react-compiler/discussions/6.
» npm install react-compiler-runtime
GitHub
github.com › facebook › react › blob › main › compiler › docs › DEVELOPMENT_GUIDE.md
react/compiler/docs/DEVELOPMENT_GUIDE.md at main · facebook/react
Commit both the output changes and the corresponding compiler changes in a second PR.
Author facebook
GitHub
github.com › originjs › vite-plugin-federation › issues › 742
react/compiler-runtime chunk imports React directly instead of through importShared — broken hooks in remote builds · Issue #742 · originjs/vite-plugin-federation
4 days ago - Description When a remote app uses React Compiler (babel-plugin-react-compiler), Rollup bundles react/compiler-runtime as a separate chunk. This chunk imports React via a direct static import: import{r as R}from"./index-XYZ.js"; // direc...
Author pedrotainha
GitHub
github.com › facebookarchive › prepack › wiki › React-Compiler
React Compiler · facebookarchive/prepack Wiki
Prepack has an embedded React compiler that allows for various ahead-of-time optimizations to React applications, with the aim of improving runtime performance.
Author facebookarchive
GitHub
github.com › vercel › next.js › discussions › 73797
React Compiler Runtime Incompatibility with Next.js and React 19 · vercel/next.js · Discussion #73797
To Reproduce Use a monorepo structure with some packages precompiled using the babel-plugin-react-compiler targeting React 19. Build and run a Next.js project using the app directory and the precompiled dependencies. Current vs. Expected behavior The Next.js project builds and runs without errors during prerendering or runtime.
Author vercel
GitHub
github.com › reactwg › react-compiler › discussions › 6
Using the compiler on < React 19 · reactwg/react-compiler · Discussion #6
tl;dr: _c is a hook for use by the React Compiler, don't use it directly. If you are unable to upgrade to React 19, please install react-compiler-runtime. Overview React Compiler automatically ...
Author reactwg
GitHub
github.com › facebook › react › issues › 31482
[React 19]: `react-compiler-runtime` always polyfills, even in React 19 · Issue #31482 · facebook/react
November 12, 2024 - Summary https://github.com/SimenB/react-19-compiler-runtime Using react-compiler-runtime always loads the polyfill. Probably because react does not have the __COMPILER_RUNTIME export it's looking for.
Author SimenB
GitHub
github.com › withastro › astro › issues › 12896
Dependency warn: [vite] Failed to resolve dependency: react-compiler-runtime, present in client 'optimizeDeps.include' · Issue #12896 · withastro/astro
January 5, 2025 - function getViteConfiguration({ include, exclude, babel, experimentalReactChildren } = {}, reactConfig) { return { optimizeDeps: { include: [ reactConfig.client, "react", "react/jsx-runtime", "react/jsx-dev-runtime", "react-dom", "react-compiler-runtime" // ⬅️ this, but not exist in package.json ], exclude: [reactConfig.server] }, plugins: [react({ include, exclude, babel }), optionsPlugin(!!experimentalReactChildren)], resolve: { dedupe: ["react", "react-dom", "react-dom/server"] }, ssr: { external: reactConfig.externals, noExternal: [ // These are all needed to get mui to work.
Author JYbill
Medium
jherr2020.medium.com › react-compiler-with-react-18-1e39f60ae71a
React Compiler With React 18 - Jack Herrington
May 22, 2024 - I’m pretty sure that react-compiler-runtime library depends on React 19. So in order to use it with React 18 we need our own implementation of the c function in that library. Turns out that function is super simple, barely even an issue.
GitHub
github.com › reactwg › react-compiler › discussions › 5
Introducing React Compiler · reactwg/react-compiler · Discussion #5
React Compiler is a new build-time tool that automatically optimizes your React app to improve its performance, particularly on updates (re-renders). The compiler is designed to work with existing ...
Author reactwg