support for the experimental 'jsx' isn't currently enabled

Question

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",

Answer 1

Creating a babel.config.js with this script solve my issue

module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

Answer 2

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'),
);

Answer 3

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.