This error occurs when Babel cannot transform JSX syntax because the required JSX plugin or preset is missing from your Babel configuration. Babel needs @babel/preset-react or @babel/plugin-transform-react-jsx to convert JSX into regular JavaScript that browsers can execute. Installing the missing dependency and configuring Babel properly resolves this issue.
JSX is a syntax extension that lets you write HTML-like code in JavaScript. Browsers cannot natively understand JSX, so Babel (a JavaScript transpiler) must convert it to standard JavaScript function calls like React.createElement(). When this error appears, it means Babel is trying to process your JSX code but cannot find the plugin that handles this transformation. This happens because either the @babel/preset-react preset (which includes JSX support) or the @babel/plugin-transform-react-jsx plugin is not installed in your project's dependencies, or your Babel configuration file does not reference it. Without the proper plugin, Babel sees the JSX syntax as invalid JavaScript and fails to compile your code.
Check your package.json file to see if @babel/preset-react (or @babel/plugin-transform-react-jsx) is listed in devDependencies. If it is missing, you need to install it.
# Install the recommended Babel React preset
npm install --save-dev @babel/preset-react @babel/core
# Or using yarn
yarn add --dev @babel/preset-react @babel/core
# Or if you prefer the individual plugin instead
npm install --save-dev @babel/plugin-transform-react-jsx @babel/coreNote: @babel/core is the Babel compiler itself and must always be installed.
Babel needs a configuration file to know which presets and plugins to use. Create a .babelrc file in the root of your project (same directory as package.json).
{
"presets": ["@babel/preset-react", "@babel/preset-env"]
}Alternatively, you can use babel.config.js:
module.exports = {
presets: ["@babel/preset-react", "@babel/preset-env"]
};The @babel/preset-react preset automatically includes all the plugins Babel needs to transform React JSX into JavaScript. The @babel/preset-env preset handles modern JavaScript syntax.
Make sure your webpack, Parcel, or other bundler is configured to run Babel on JavaScript and JSX files. For webpack, check that you have babel-loader installed and configured:
// webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
]
}Install babel-loader if needed:
npm install --save-dev babel-loaderBuild tools like webpack, Next.js, and Create React App cache compiled files. Clear the cache and rebuild to ensure Babel processes your files with the new configuration.
# For most projects using npm scripts
npm run build
# For Next.js projects
rm -rf .next && npm run build
# For Create React App
rm -rf node_modules/.cache && npm start
# For webpack projects
rm -rf dist && npm run buildIn React 17 and later, you can use the new automatic JSX runtime, which simplifies configuration. Update your .babelrc to use it:
{
"presets": [
[
"@babel/preset-react",
{
"runtime": "automatic"
}
],
"@babel/preset-env"
]
}With the automatic runtime, you no longer need to import React in every file that uses JSX. Babel handles the import automatically. If you are using React 16 or older, omit the runtime option or set it to "classic".
Run Babel with the --show-config flag to see which configuration is actually being used:
npx babel --show-configThis command displays the merged Babel configuration for the current directory. Verify that @babel/preset-react (or your JSX plugin) is listed in the output. If it is not, Babel is not finding your configuration file. Check that:
1. The configuration file (.babelrc or babel.config.js) is in the correct directory (project root)
2. The file syntax is valid (proper JSON or JavaScript)
3. The file is not ignored by .babelignore or other ignoring mechanisms
All Babel packages should use the same major version. Mismatches can cause the JSX plugin not to work. Run:
npm list @babel/core @babel/preset-react @babel/preset-envVerify that all @babel/* packages are at the same major version (e.g., all @7.x.x or all @8.x.x). If versions differ, update them to match:
npm install --save-dev @babel/core@latest @babel/preset-react@latest @babel/preset-env@latestIf you are using TypeScript with JSX, you may need @babel/preset-typescript as well:
{
"presets": [
"@babel/preset-typescript",
["@babel/preset-react", { "runtime": "automatic" }],
"@babel/preset-env"
]
}Alternatively, you can let TypeScript handle JSX transformation and configure it in tsconfig.json:
{
"compilerOptions": {
"jsx": "react-jsx"
}
}In monorepo or workspace setups using npm workspaces or yarn workspaces, Babel packages must be installed at the workspace root, not in individual package subdirectories. If you see the error only in specific packages, check that they can resolve Babel dependencies from the root node_modules. For Next.js projects, the framework includes Babel configuration automatically, so you rarely need to add @babel/preset-react manually—however, if you customize Babel in next.config.js, ensure you include the React preset. The Babel 8.x release introduced breaking changes; if upgrading from Babel 7.x, check the migration guide to ensure plugin configurations remain compatible. Create React App (CRA) provides Babel configuration out of the box; if you eject from CRA, you must manually configure Babel with @babel/preset-react. For Jest testing, include @babel/preset-react in your Babel configuration even if not using Babel for production builds, because Jest uses Babel to transpile test files. If using Babel with custom plugins, load the JSX plugin first in the plugins array or use @babel/preset-react, which applies plugins in the correct order internally.
Prop spreading could cause security issues
Prop spreading could cause security issues
Error: error:0308010C:digital envelope routines::unsupported
Error: error:0308010C:digital envelope routines::unsupported
React Hook "useEffect" is called conditionally. React Hooks must be called in the exact same order in every component render.
React Hook useEffect placed inside a condition
Hook can only be called inside the body of a function component
Hook can only be called inside the body of a function component
Rollup failed to resolve import during build
How to fix "Rollup failed to resolve import" in React