'Support for the experimental syntax 'jsx' isn't currently enabled

I'm trying to run very simple code, but I'm getting an error, I didn't use the create react app!

It looks like my babel.config.js file is being ignored!

This is the structure of my small project:

My html file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReactJS</title>
</head>

<body>
    <div id="app"></div>
    <script  src = 'bundle.js' ></script>
</body> 

</html>

My index.js file:

import React from 'react';
import { render } from 'react-dom';

render(<h1>Hello World!!</h1>, document.getElementById('app'));

My package json:

{
  "name": "front",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack-dev-server --mode production"
  },
  "dependencies": {
    "@babel/cli": "^7.10.5",
    "@babel/core": "^7.10.5",
    "@babel/plugin-proposal-class-properties": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.9.0",
    "babel-loader": "^8.1.0",
    "webpack-dev-server": "^3.10.3"
  }
}

My webpack.config.js

const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'src', 'index.js'),
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'public'),
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
            }
        }]
    },
};

And this is my babel.config.js

module.exports = {
    "presets": ["@babel/preset-env", "@babel/preset-react"]

};

Error when

yarn webpack-dev-server --mode development

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /root/treina/front/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (4:8):

  2 | import { render } from 'react-dom';
  3 | 
> 4 | render(<h1>Hello World!!</h1>, document.getElementById('app'));
    |        ^

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.
    at Parser._raise (/root/treina/front/node_modules/@babel/parser/lib/index.js:757:17)
    at Parser.raiseWithData (/root/treina/front/node_modules/@babel/parser/lib/index.js:750:17)
    at Parser.expectOnePlugin (/root/treina/front/node_modules/@babel/parser/lib/index.js:8849:18)
    at Parser.parseExprAtom (/root/treina/front/node_modules/@babel/parser/lib/index.js:10170:22)
    at Parser.parseExprSubscripts (/root/treina/front/node_modules/@babel/parser/lib/index.js:9688:23)
    at Parser.parseMaybeUnary (/root/treina/front/node_modules/@babel/parser/lib/index.js:9668:21)
    at Parser.parseExprOps (/root/treina/front/node_modules/@babel/parser/lib/index.js:9538:23)
    at Parser.parseMaybeConditional (/root/treina/front/node_modules/@babel/parser/lib/index.js:9511:23)
    at Parser.parseMaybeAssign (/root/treina/front/node_modules/@babel/parser/lib/index.js:9466:21)
    at Parser.parseExprListItem (/root/treina/front/node_modules/@babel/parser/lib/index.js:10846:18)
ℹ ｢wdm｣: Failed to compile.

I'm using yarn and the WSL terminal

Solution 1:^[1]

Just create a .babelrc file in the root of your project and add:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Solution 2:^[2]

In my case, Creating "babel.config.js" file with the following content worked.

module.exports = {
    presets:[
        "@babel/preset-env",
        "@babel/preset-react"
    ]
}

Solution 3:^[3]

This https://stackoverflow.com/a/52693007/10952640 solved for me.

You need @babel/preset-react set also on webpack config:

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

Solution 4:^[4]

2021

I fixed it adding

"jsx": "react-jsx"

to my "compilerOptions" on my tsconfig.json file

Solution 5:^[5]

Yet another possible cause. I got this error when try to run a project in a command prompt at a path that included symlinks. Changing directory directly into the real path solved the issue.

Solution 6:^[6]

I remade my project from scratch and realized that I was wrong to not include the "D" at the end of the command:

yarn add webpack-dev-server -D

Now it's working!

Solution 7:^[7]

The solution that worked for me was when I discovered node_modules/react-scripts/config/webpack.config.js contained:

                // @remove-on-eject-begin
                babelrc: false,
                configFile: false,

By setting babelrc: true, I was finally able to get .babelrc changes to work. I'm guessing the configFile: parameter is what you will need to change. (Note, the babelrc appears to need to go into src/ for react-scripts to find it, reasonably likely to also be true for babel.config.js.)

Solution 8:^[8]

Mmm i think the problem is in your babel, try this:

npm i --save-dev @babel/plugin-proposal-class-properties
add loose:true in your babelrc

Solution 9:^[9]

inside the webpacker.yml file if using react with rails add jsx extension.

  extensions:
    - .jsx
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

Solution 10:^[10]

In my package.json, I added:

 "babel": {
  "presets": [
    "@babel/react",
    "@babel/env"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/plugin-transform-runtime"
  ]
}

Solution 11:^[11]

For me the test doesn't work in VSCode only. I'm using yarn workspace and CRA as one of the workspaces.

This means the solution is to ignore the failing VSCode tests and start the tests in command line instead:

yarn workspace frontend test

Solution 12:^[12]

I came across the same error, my problem was that during rebase I lost a brace somewhere so my package.json wasn't working properly - if your babel is showing errors like this - try checking if your package.json has brackets properly set up

Solution 13:^[13]

For the people who are getting this error while building Remix app, change the extension of file from .js to .jsx/.tsx or check with tsconfig file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	lrkwz
Solution 2	Dharman
Solution 3	BetoLima1
Solution 4	Lucas Caponi da Silva
Solution 5	kamrann
Solution 6	Manzini
Solution 7	righdforsa
Solution 8	Ryan Tillaman
Solution 9	vidur punj
Solution 10	CodeBug
Solution 11	tonisives
Solution 12	bstrihova
Solution 13	purushottam kumar

'Support for the experimental syntax 'jsx' isn't currently enabled

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]