5

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.

pratiksha chavan
  • 86
  • 1
  • 5

2 Answers2

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'] },
  },
BetoLima1
  • 441
  • 5
  • 7
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"
    ]
  }
jaybhatt
  • 550
  • 2
  • 7
  • i created babel.config.js file and added above contents but facing same issues. – pratiksha chavan May 14 '21 at 11:10
  • 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. – jaybhatt May 14 '21 at 11:25