{"id":20494,"library":"react-compiler-webpack","title":"react-compiler-webpack","description":"A webpack and rspack loader plugin that integrates the official React Compiler (React Forget) into your build pipeline. Version 1.0.0 provides a thin wrapper around babel-plugin-react-compiler, allowing automatic memoization of React components and hooks. It supports both webpack and rspack configurations, ships with TypeScript types, and requires babel-plugin-react-compiler as a peer dependency. Key differentiator: it is the only dedicated webpack loader for React Compiler, offering a simple setup with defineReactCompilerLoaderOption helper for type-safe options. Release cadence is stable with active maintenance on GitHub.","status":"active","version":"1.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/SukkaW/react-compiler-webpack","tags":["javascript","react","react-forget","react-compiler","webpack-loader","webpack","nextjs","app-router","typescript"],"install":[{"cmd":"npm install react-compiler-webpack","lang":"bash","label":"npm"},{"cmd":"yarn add react-compiler-webpack","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-compiler-webpack","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency; react-compiler-webpack delegates compilation to babel-plugin-react-compiler","package":"babel-plugin-react-compiler","optional":false}],"imports":[{"note":"Default export is an object, not the loader itself. Must destructure reactCompilerLoader.","wrong":"const reactCompilerLoader = require('react-compiler-webpack');","symbol":"reactCompilerLoader","correct":"const { reactCompilerLoader } = require('react-compiler-webpack');"},{"note":"This is a named export, not default. Also available via ESM: import { defineReactCompilerLoaderOption } from 'react-compiler-webpack';","wrong":"import defineReactCompilerLoaderOption from 'react-compiler-webpack';","symbol":"defineReactCompilerLoaderOption","correct":"const { defineReactCompilerLoaderOption } = require('react-compiler-webpack');"},{"note":"ESM import works fine. TypeScript types are included.","wrong":null,"symbol":"reactCompilerLoader","correct":"import { reactCompilerLoader } from 'react-compiler-webpack';"}],"quickstart":{"code":"// webpack.config.js\nconst { reactCompilerLoader, defineReactCompilerLoaderOption } = require('react-compiler-webpack');\n\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.[mc]?[jt]sx?$/i,\n        exclude: /node_modules/,\n        use: [\n          // Your existing JSX transpiler (e.g., babel-loader, swc-loader)\n          // { loader: 'babel-loader' },\n          {\n            loader: reactCompilerLoader,\n            options: defineReactCompilerLoaderOption({\n              // React Compiler options\n              // e.g., runtimeModules: { 'react': 'import React from \"react\"' }\n            })\n          }\n        ]\n      }\n    ]\n  }\n};\n\n// Then build with webpack as normal","lang":"javascript","description":"Configures webpack to use react-compiler-webpack loader for automatic memoization of React components. Requires a JSX transpiler (e.g., babel-loader) placed before this loader in the use array."},"warnings":[{"fix":"Order the loaders as: [/* transpiler */, reactCompilerLoader] in the 'use' array.","message":"Loader must be placed AFTER your JSX transpiler (e.g., babel-loader, swc-loader) in the loaders array, not before.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use defineReactCompilerLoaderOption({...}) in the loader options.","message":"react-compiler-webpack does not support configuration via ReactCompilerConfig in tsconfig.json or babel config; options must be passed via loader options.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Manually install babel-plugin-react-compiler as a dev dependency if not automatically installed.","message":"babel-plugin-react-compiler must be installed as a peer dependency; auto-install may fail with npm <7 or yarn classic.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Upgrade to webpack 5+ or use rspack.","message":"Not compatible with webpack 4; requires webpack 5 or later (or rspack).","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run: npm i -D babel-plugin-react-compiler (or yarn/pnpm equivalent).","cause":"Missing peer dependency babel-plugin-react-compiler.","error":"Module not found: Error: Can't resolve 'babel-plugin-react-compiler'"},{"fix":"Use: const { reactCompilerLoader } = require('react-compiler-webpack');","cause":"Default import instead of named import for reactCompilerLoader.","error":"TypeError: reactCompilerLoader is not a function"},{"fix":"Use defineReactCompilerLoaderOption({ runtimeModules: ... }) or pass the options object directly but ensure it matches the schema.","cause":"Passing React Compiler options incorrectly; they must be wrapped in defineReactCompilerLoaderOption() or passed as a plain object.","error":"Option 'runtimeModules' is not allowed"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}