Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

So I have endlessly searched the web to fix this issue.

"support for the experimental 'jsx' isn't currently enabled...
Add @babel/preset-react to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx to the 'plugins' section to enable parsing."
So I had tons (like 100) of these as errors, so I altered my .babelrc and .babel.config.js to look like:
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [
    loader: 'babel-loader',
    options: {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',{
        'plugins': [
            ["@babel/plugin-proposal-class-properties", { "loose": true }]
and the config:
"presets": [
    "react",
    "@babel/preset-env",
    "@babel/preset-typescript",
    "@babel/preset-react"
  "plugins": [
    "@babel/plugin-proposal-class-properties",
        "loose": true
    "@babel/plugin-transform-runtime",
      "regenerator": true
Which resolved most of these errors.
However I keep seeing this same error for 5 files -> there are no noticeable differences between these 5 files and the 100's that were throwing the exact same errors before.
Upon the advice of other stack overflow answers and the internet I changed my .babelrc and config.js:
test: /\.jsx?$/,
exclude: [/node_modules/],
use: [
    loader: 'babel-loader',
    options: {
    presets: [
        '@babel/preset-env',
        '@babel/preset-react',
        '@babel/preset-typescript',{
        'plugins': [
            ["@babel/plugin-proposal-decorators", { "legacy": true }],
            "@babel/plugin-syntax-dynamic-import",
            "@babel/plugin-transform-regenerator",
            ["@babel/plugin-transform-runtime", {helpers: false, regenerator: true}],
            ["@babel/plugin-proposal-class-properties", { "loose": true }]
and the config:
"presets": [
    "react",
    ["@babel/preset-env",
      "targets": {
        "esmodules": true,
        "node" : "current"
    "@babel/preset-typescript",
    "@babel/preset-react"
  "plugins": [
    "@babel/plugin-proposal-class-properties",
        "loose": true
    "@babel/plugin-transform-runtime",
      "regenerator": true
I have tried many different combinations of these packages, adding one each time to see if it would build or change anything and nothing changed. I also tried adding @babel/plugin-syntax-jsx to the plugins, but it didn't seem to work either.
I've also tried having the @babel packages into the .babelrc as well, but that didn't work either.
Is there any other packages I can try to include or use? Or settings for the packages that might change it for these files?
EDIT: package.json dependencies include:
"@babel/runtime": "^7.10.4",
"@babel/cli": "^7.10.4",
"@babel/core": "^7.10.4",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.4",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.10.4",
"@babel/plugin-transform-runtime": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@babel/preset-typescript": "^7.10.4",
"core-js": "^3.6.5",
"react": "^16.0.0",
"react-dom": "^16.0.0",
                faced the same issue, changing the path to run jest and switch back solves the issue for me.  example first I encountered the issue with npx jest paht/to/test/file.js I did change the path then run the command again. It seems like jest caching somehow. not sure
– Jing
                May 10, 2021 at 10:35
                I ended up making a webpack.config.file that used    module.exports = {.....module: {rules: [...    formatting. Much like Drews first answer below with the babel.config.js. From my understanding the export helps expose the config. tutorialsteacher.com/nodejs/….
– meh
                Jul 3, 2021 at 4:08
                Good to know that it worked for you, but why is it the right solution (which it isn't for me at least), where did you find it, probably a source would help to understand the problem instead of just copy and pasting a solution.
– Ingo Steinke
                Apr 14, 2021 at 16:26
                This worked for me when deploying a Hugo static website that I had with Netlify starter template. I was also getting the same error.
– Zaheer Baloch
                Apr 19, 2021 at 21:24
                I made a webpack.config.js, but the real importance seems to be the module.exports. I know that helps expose the config as a module, and I guess that is needed behind the scenes.
– meh
                Jul 3, 2021 at 4:10
                I am following a book of tutorials and even on github the book's latest code doesn't have a babel.config.js file at all. But simply adding the file to my project root directory and pasting in the above solution has solved the problem for me. I'd like to knwo then what the difference between babelrc, babel.config.js is?
– Rin and Len
                Sep 6, 2021 at 11:44
                Aaand I found the REAL issue: I had named my babelrc without the period: .babelrc I then deleted the contents of babel.config.js and my project still builds with ǹpm start`  "dot"babelrc contains this {     "presets": [         [ "@babel/preset-env",             { "targets": { "node": "current"                 }   }  ],  "@babel/react"     ] } It finally dawned on me that .bashrc, vimrc, et al are all hidden files, so by definition babelrc should be too.
– Rin and Len
                Sep 6, 2021 at 11:49
I must have tried tons of different ways. Sharing what worked for me. Do take note of the versions, different versions might need tweaks.
My react project was created using create-react-app (CRA). Now since CRA hides babel and webpack config files and there is no way to modify them, there are basically 2 options:
react eject (which I didn't try. Felt managing all by myself could get bit overwhelming).
Use react-app-rewired to tweak babel configs without having to eject. (I used this)
I additionally used customize-cra. React-app-rewired suggests it for later versions of CRA.
Update scripts and add dev dependencies in package.json:
 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject",
    "docs": "jsdoc -c jsdoc.conf.json"
"devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.1.6",
    "@babel/preset-react": "^7.10.1"
config-overrides.js (must be at root level, i.e. at same directory level of package.json).
If error is from some library in node_modules, make sure to 'include' it (babelInclude):
const path = require('path');
const {
    override,
    babelInclude,
    addBabelPreset,
    addExternalBabelPlugin,
} = require('customize-cra');
module.exports = override(
    babelInclude([
        path.resolve('src'),
        path.resolve('node_modules/react-native-animatable'),
    addBabelPreset("@babel/preset-react"),
    addExternalBabelPlugin('@babel/plugin-proposal-class-properties'),
                spent hours today fighting with this... babelrc, config, webpack config, etc... nothing worked... you just saved me
– Brad Herman
                Apr 26, 2022 at 22:54
This is difficult for us backend engineers just starting out with React, iterating on the community's 3 or 4 years' worth of hackish workarounds to fundamental problems with create-react-app. After a whole week of dead-end encounters with deprecated packages and advice, I learned it turns out you don't need react-app-rewired at all.
Here's my answer (hopefully helps others who follow the same google rabbit-hole): define these in your package.json:
  "main": "./build/index.js",
  "module": "./build/index.js",
  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/preset-env": "^7.14.4",
    "@babel/preset-react": "^7.13.13",
    "commander": "^7.2.0",
  "scripts": {
    "transpile": "NODE_ENV=production npx babel --out-dir ../build --relative --copy-files src",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
The npm transpile ; npm publish commands should now work. I found that due to the issue described here by Utku Gultopu, users of yarn will need to do this beforehand to fully upgrade from babel 6 to 7:
npm install @babel/core @babel/cli @babel/preset-react @babel/preset-env
You don't need any of these: webpack.config.js, .babelrc or babel.config.js. Be sure to clear the build subdirectory (and include it in .gitignore) before running either the build (for creating a runtime image) or transpile (for publishing your module library) operations--they are two very different things.
Are you running this inside of a node_modules folder? If so you need to change
exclude: [/node_modules/],
so it doesn't exclude your project.
It should become something along the lines of
exclude: [/node_modules/ &&
        !/node_modules\/(project_name)/],
But with correct regex syntax and change project_name to the folder name.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.