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.

BetoLima1 · Accepted Answer · 2021-10-21 04:45:49Z

1

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'] },
  },

answered Oct 21, 2021 at 4:45

BetoLima1

5015 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jaybhatt · Accepted Answer · 2021-05-14 10:01:09Z

0

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"
    ]
  }

answered May 14, 2021 at 10:01

jaybhatt

5562 silver badges7 bronze badges

2 Comments

pratiksha chavan Over a year ago

i created babel.config.js file and added above contents but facing same issues.

jaybhatt Over a year ago

Can you elaborate more about where you cloned or bootstrapped your project from? Also, I hope you exported default from the babel.config.js file you created.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related