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

Question

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

related: https://stackoverflow.com/q/62820035/104380 – vsync Jan 23 '21 at 14:32 — vsync, Jan 23 '21 at 14:32

score 96 · Answer 1 · edited Jan 02 '22 at 20:41

96

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

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

edited Jan 02 '22 at 20:41

lrkwz

5,657
3
35
55

answered Apr 07 '21 at 10:39

Mário Prada

1,081
7
12

2

Where to put the `.bablerc` file. I am new to the react dev. – Anirban Nag 'tintinmj' Jun 18 '21 at 14:28
3

On the root of your project. Like this: -node_modules -src -.babelrc – Mário Prada Jun 18 '21 at 19:00
In my case I only need the latter one, since first first one is just for ES6 syntax, which is not related to **react**-jsx. – VimNing Feb 20 '22 at 11:27

score 17 · Answer 2 · edited Apr 14 '21 at 06:23

17

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

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

edited Apr 14 '21 at 06:23

Dharman

26,923
21
73
125

answered Apr 14 '21 at 06:17

darklord

393
3
7

score 11 · Answer 3 · answered Oct 21 '21 at 04:30

11

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

answered Oct 21 '21 at 04:30

BetoLima1

171
1
7

2

its solved my issue, very clear config – raju Dec 09 '21 at 09:42

score 6 · Answer 4 · answered Jul 17 '21 at 01:14

6

2021

I fixed it adding

"jsx": "react-jsx"

to my "compilerOptions" on my tsconfig.json file

answered Jul 17 '21 at 01:14

Lucas Caponi da Silva

69
1
1

score 4 · Answer 5 · answered Sep 21 '21 at 02:36

4

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.

answered Sep 21 '21 at 02:36

kamrann

189
1
10

This is what worked for me. I was going to a symlink, then to a couple inner directories. When I instead cd'd to the real directories without going through that symlink, it started working for me. Thanks! – B T Oct 28 '21 at 20:41
Symlinks will absolutely cause this issue. I have been experimenting with symlinking a directory that's inside a more complex react app to a simple fresh react app and rather than copying the directory in/out I symlinked it so that any changes would be instantly reflected and I could do rapid local development without upgrading the larger app's react version. I tried directly referencing the files in the import statements but relative paths that point outside the react app's src directory is not allowed. But symlinking causes this issue. Frustrating. – James Oltmans May 20 '22 at 17:31

score 2 · Answer 6 · answered Jul 21 '20 at 01:33

2

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!

answered Jul 21 '20 at 01:33

Manzini

1,097
1
8
14

No need to make project again, the above command will do needful. – vidur punj Dec 28 '20 at 07:56

score 2 · Answer 7 · answered Feb 17 '21 at 18:10

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.)

score 1 · Answer 8 · answered Jul 20 '20 at 23:17

1

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

answered Jul 20 '20 at 23:17

Ryan Tillaman

53
4

1

Looks like you have to include some options in your rules inside the webpack.config `options: { presets: ['@babel/preset-env', '@babel/react',{ 'plugins': ['@babel/plugin-proposal-class-properties']}] }` – Ryan Tillaman Jul 21 '20 at 00:01
I did it, same problem – Manzini Jul 21 '20 at 00:08

score 0 · Answer 9 · answered Dec 29 '20 at 04:00

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

score 0 · Answer 10 · edited Feb 07 '22 at 16:39

0

In my package.json, I added:

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

edited Feb 07 '22 at 16:39

CodeBug

1,455
1
6
21

answered Sep 21 '21 at 19:21

Thuy

1,331
10
10

score 0 · Answer 11 · answered Apr 26 '22 at 06:55

0

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

answered Apr 26 '22 at 06:55

tonisives

1,386
1
12
15

score 0 · Answer 12 · answered May 02 '22 at 10:23

0

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

answered May 02 '22 at 10:23

bstrihova

1

1

There are two other answers that not only mentions package.json, but also shows an example. Does your answer really add anything to those answers? – klutt May 03 '22 at 09:53
it doesn't add to the answers of others, that's why it is a separate answer...if I saw this answer, it would have helped me, that sometimes this error can occur from typos/missing brackets.... – bstrihova May 03 '22 at 11:11

score 0 · Answer 13 · answered May 03 '22 at 20:22

0

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.

answered May 03 '22 at 20:22

purushottam kumar

1
1

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

13 Answers13

Linked