{"id":10553,"library":"babel-preset-react-app","title":"Babel Preset for Create React App","description":"babel-preset-react-app is the official Babel preset utilized by Create React App (CRA) projects to transpile modern JavaScript and React syntax into backward-compatible code. It bundles configurations for React JSX, class properties, object rest/spread, dynamic imports, and various ECMAScript features, along with Flow or TypeScript support. The current stable version is 10.1.0 (as of the prompt's context, reflecting the package version). Its release cadence is tightly coupled with Create React App's development, typically receiving updates when CRA itself has major dependency upgrades (e.g., Webpack, Jest, ESLint) or introduces new features. Key differentiators include its opinionated, zero-config approach for CRA users, providing a robust and battle-tested setup that integrates seamlessly with the CRA ecosystem without manual Babel configuration, contrasting with more custom or granular Babel setups.","status":"active","version":"10.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/create-react-app","tags":["javascript"],"install":[{"cmd":"npm install babel-preset-react-app","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-react-app","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-react-app","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package is a Babel preset and is configured in a .babelrc or babel.config.js file, not imported directly into application code. The value 'react-app' refers to the preset itself.","wrong":"import preset from 'babel-preset-react-app'","symbol":"preset","correct":"{ \"presets\": [\"react-app\"] }"},{"note":"To enable TypeScript support within the preset, pass an options object with `typescript: true`. This assumes a `tsconfig.json` file is present in the project root.","symbol":"typescript config","correct":"{ \"presets\": [[\"react-app\", { \"typescript\": true }]] }"},{"note":"To enable Flow support, pass an options object with `flow: true`. Ensure you have a `.flowconfig` file. TypeScript and Flow options are mutually exclusive.","symbol":"flow config","correct":"{ \"presets\": [[\"react-app\", { \"flow\": true, \"typescript\": false }]] }"}],"quickstart":{"code":"{\n  \"presets\": [\n    [\n      \"react-app\",\n      {\n        \"flow\": false,\n        \"typescript\": true, // Set to true if using TypeScript, false otherwise.\n        \"absoluteRuntime\": true // Use absolute paths for Babel helper imports\n      }\n    ]\n  ]\n}\n\n// Example React component in src/App.tsx (if typescript: true)\n// import React from 'react';\n\n// const App: React.FC = () => {\n//   const [count, setCount] = React.useState(0);\n//   const increment = () => setCount(prev => prev + 1);\n\n//   return (\n//     <div>\n//       <h1>Hello from React App!</h1>\n//       <p>Count: {count}</p>\n//       <button onClick={increment}>Increment</button>\n//     </div>\n//   );\n// };\n\n// export default App;\n","lang":"json","description":"Demonstrates the basic `.babelrc` configuration for `babel-preset-react-app`, including options for TypeScript and absolute runtime paths. This file should be in your project root."},"warnings":[{"fix":"Review your project's `package.json` and any custom configuration files (`webpack.config.js`, `.eslintrc.js`, `jest.config.js`) for compatibility with the new major versions. Update any plugins or loaders that might conflict.","message":"Create React App 5.0 (which uses babel-preset-react-app v5.0.0+) upgraded major dependencies including Webpack 5, Jest 27, ESLint 8, and PostCSS 8. This may introduce breaking changes in custom configurations or specific tooling integrations that rely on older versions of these dependencies.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"For existing projects, ensure you are on React 17+. You can safely remove `import React from 'react';` from component files, although leaving it will not cause issues. If you have custom Babel setups, ensure `@babel/plugin-transform-react-jsx` is configured correctly, or rely on this preset.","message":"Create React App 4.0 (using babel-preset-react-app v4.0.0+) introduced support for the New JSX Transform from React 17. While generally backwards compatible, it changes how JSX is compiled and removes the need to `import React from 'react'` at the top of every file containing JSX.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"To use relative paths, set the `absoluteRuntime` option to `false` in your `.babelrc` or Babel configuration file: `[\"react-app\", { \"absoluteRuntime\": false }]`.","message":"By default, `babel-preset-react-app` uses `absoluteRuntime: true` for Babel helper imports. If you need relative paths for some advanced scenarios (e.g., specific monorepo setups or environments with non-standard module resolution), you must explicitly configure it.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"If using outside of CRA, ensure you have `@babel/core`, `react`, and any necessary polyfills (`core-js`) installed and configured correctly. For highly customized projects, consider using more granular Babel presets like `@babel/preset-env` and `@babel/preset-react` directly.","message":"This preset is intended for use with Create React App projects. While it can be used independently, it is highly opinionated and may conflict with other custom Babel configurations or require additional polyfills that CRA typically handles. It assumes a specific environment and tooling setup.","severity":"gotcha","affected_versions":"all"},{"fix":"Always keep your `react-scripts` package (and by extension, `babel-preset-react-app`) updated to the latest stable version to benefit from bug fixes, performance improvements, and security patches for its bundled dependencies. Run `npm install --save --save-exact react-scripts@latest` or `yarn add --exact react-scripts@latest`.","message":"The documentation excerpt refers to `babel-preset-react-app` handling vulnerability fixes for dependencies like `resolve-url-loader`, `webpack-dev-server`, and `terser-webpack-plugin` in older versions (e.g., v3.4.x). While these specific issues might be resolved, it highlights that relying on old versions of this preset (and thus old CRA versions) could expose projects to unpatched vulnerabilities in its underlying dependencies.","severity":"deprecated","affected_versions":"<4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `@babel/core`, `babel-loader`, and `babel-preset-react-app` are installed as `devDependencies`. If you are manually managing Babel dependencies, verify all necessary presets and plugins (e.g., `@babel/preset-env`, `@babel/plugin-proposal-class-properties`) are installed and correctly configured in your `package.json` and `.babelrc`.","cause":"This preset relies on `@babel/preset-env` and other Babel plugins. If you're using this preset outside of a Create React App context without a proper Babel setup, these peer dependencies might not be installed.","error":"Error: Cannot find module '@babel/preset-env'"},{"fix":"Ensure your `react` and `react-dom` packages are at least `17.0.0` and that `react-scripts` is updated to at least `4.0.0` (or `babel-preset-react-app` to `4.0.0`) to leverage the new JSX transform. Verify your `.babelrc` file does not override or disable the necessary JSX transform options.","cause":"This error often occurs in React 17+ projects when an older Babel configuration or `babel-preset-react-app` version is used that doesn't fully support the new JSX transform. It indicates an issue with how JSX is being compiled.","error":"Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner}). If you meant to render a collection of children, use an array instead."},{"fix":"Check your Babel configuration order if you have multiple presets/plugins. Ensure `babel-preset-react-app` is applied correctly. If using `react-scripts`, make sure you haven't ejected and introduced conflicting Babel configurations. Update `react-scripts` to the latest version.","cause":"While `babel-preset-react-app` includes support for class properties, this error can occur if another Babel configuration or a Webpack loader is processing the files *before* or *after* this preset in a way that interferes, or if an outdated version is used.","error":"Support for the experimental syntax 'classProperties' isn't currently enabled"},{"fix":"You can either: 1) Add `import React from 'react';` at the top of your TypeScript files if `isolatedModules` is enabled. 2) Set the `jsx` compiler option in `tsconfig.json` to `'react-jsx'` or `'react-jsxdev'` for React 17+ projects, which informs TypeScript about the new JSX transform and removes the need for explicit `React` imports.","cause":"This typically happens in TypeScript projects when the `isolatedModules` compiler option is enabled, and a file uses JSX without explicitly importing `React` (which is no longer necessary with the new JSX transform in React 17+). The TypeScript compiler still needs to understand the `React` reference if `isolatedModules` is on.","error":"TypeScript error: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead."}],"ecosystem":"npm"}