Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled in react js

Question

i am trying run my react application using npm start commamnd and installed both @babel/preset-react and @babel/plugin-syntax-jsx. but i am running this react application getting following error.

Support for the experimental syntax 'jsx' isn't currently enabled (7:9):

   6 | const PostCodeLookup = props => {
>  7 |  return <PostcodeLookup {...props} />
     |         ^
   8 |
   9 | };
  

Add @babel/preset-react ( https://git.io/JfeDR ) to the 'presets' section of your Babel config to enable transformation. If you want to leave it as-is, add @babel/plugin-syntax-jsx ( https://git.io/vb4yA ) to the 'plugins' section to enable parsing.

Answer 1

• Can you tell where you bootstrapped your application from? (Create React App or something like that?)
• Also, you need to have a .babelrc or babel.config.js(on) file with these contents, just installing the packages won't work.

Putting an example below for how your babel.config.json should look like. Please remove any extra plugins from below example in case you use it.

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": false,
          "targets": {
            "node": "current"
          }
        }
      ],
      "@babel/preset-react"
    ],
    "env": {
      "test": {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ],
        "plugins": [
          [
            "@babel/plugin-proposal-class-properties",
            {
              "spec": true
            }
          ]
        ]
      }
    },
    "plugins": [
      [
        "@babel/plugin-proposal-class-properties",
        {
          "spec": true
        }
      ],
      "@babel/plugin-proposal-object-rest-spread"
    ]
  }
  

Answer 2

It's hard to tell with no knowledge on how you bootstrapped your app, as jaybhatt said before.

If you used react-create-app probably you messed with packages and ended up in a inconsistent state. Try to reset your app. Creating a app on another folder and migrating your code there is an option (I did that a couple of times:).).

If you created the app structure "by hand", check if you have "@babel/preset-react" set also on webpack config:

rules: [
  {
    test: /\.(js|jsx)$/,
    exclude: /(node_modules|bower_components)/,
    loader: 'babel-loader',
    options: { presets: ['@babel/env', '@babel/preset-react'] },
  },