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

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.

Answer 4

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.