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

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

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

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

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.