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 \'pr         


        

Answer 1

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