Backwards Compatibility
React Compiler works best with React 19, but it also supports React 17 and 18 with additional configuration.
You will learn
- How to configure React Compiler for React 17 and 18
Using React Compiler with React 17 or 18
React Compiler does not require any special configuration to work with React 19. For React 17 or 18, you need two things:
1. Install the runtime package
Terminal
npm install react-compiler-runtime@rc
2. Configure the target version
// babel.config.js
module.exports = {
plugins: [
['babel-plugin-react-compiler', {
target: '18', // or '17' for React 17
}],
],
};Always use the major version number as a string for the target option. Use '17' not 17 or '17.0.2'.
Framework-specific configuration
Next.js
// next.config.js
module.exports = {
experimental: {
reactCompiler: {
target: '18',
},
},
};Vite
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
['babel-plugin-react-compiler', { target: '17' }],
],
},
}),
],
});