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 162 · Accepted Answer · edited Jan 02 '22 at 20:41

162

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

6,105
3
36
59

answered Apr 07 '21 at 10:39

Mário Prada

1,792
1
9
13

5

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

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. – NeoZoom.lua Feb 20 '22 at 11:27
1

@AnirbanNag'tintinmj' in the same folder as your `package.json` file – Boris Verkhovskiy Jun 07 '22 at 00:26
3

The team that built/named babel really need to re-read Hitchiker's Guide. I'd even front them some pocket fluff if they need it. I keep sticking .babelrc in my ear, but all I get is a Gorgontuous headache. – Midiman Jan 31 '23 at 19:44

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

28

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

30,962
25
85
135

answered Apr 14 '21 at 06:17

learning-everyday

503
5
7

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

25

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

441
5
7

3

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

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

9

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

115
1
2

sorry, no luck either – Yumin Gui Jan 31 '23 at 21:35

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

7

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

219
4
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 5 · Answer 6 · edited Jul 10 '23 at 10: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.)

This may apply to others if you've run npm run eject on your create-react-app project. This will create the webpack.config.js file and defaults babelrc and configFile to false.

score 4 · Answer 7 · answered Jul 21 '20 at 01:33

4

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,671
2
9
15

1

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

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

3

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

73
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 3 · Answer 9 · answered Jun 13 '22 at 22:03

Adding another answer to the mix... the project I was looking at when I hit this was built off create-react-app using react scripts v4 and React 17. The warning was showing for me in relation to the source code for a third-party module, something like:

Failed to compile.                                                                                                                                                                                                                    
                                                                                                                                                                                                                                      
./node_modules/@third-party/ui-components/src/components/Header.js 
SyntaxError: C:\Development\app\node_modules\@third-party\ui-components\src\components\Header.js: Support for the experimental syntax 'jsx' isn't currently enabled (142:5)

The problem turned out to be that someone had mistakenly added the import for the third-party component as follows:

import { Header } from '@third-party/ui-components/src';

Instead of:

import { Header } from '@third-party/ui-components';

So, webpack was trying to use the original source code for the package instead of the compiled export. And, checking into react-scripts, the module loader for JS external to the app is set up as follows:

// Process any JS outside of the app with Babel.
// Unlike the application JS, we only compile the standard ES features.
{
  test: /\.(js|mjs)$/,
  exclude: /@babel(?:\/|\\{1,2})runtime/,
  loader: require.resolve('babel-loader'),
  options: {
    babelrc: false,
    configFile: false,
    compact: false,
    presets: [
      [
        require.resolve('babel-preset-react-app/dependencies'),
        { helpers: true },
      ],
    ],
    cacheDirectory: true,
    // ----- 8< -----
  },
}

Fixing up the import path by removing the /src fixed the issue.

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

2

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,649
1
8
23

answered Sep 21 '21 at 19:21

Thuy

1,493
1
11
11

score 1 · Answer 11 · answered May 02 '22 at 10:23

1

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

21
2

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 1 · Answer 12 · answered Jun 27 '22 at 15:23

If you're using Babel 7 and yarn workspaces or a monorepo and getting this error you need to tell Babel to transpile files outside your package directory.

In your webpack 5 config put babelrcRoots: ['../*'] in your js test object options. Here's mine for example:

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

See other options in this github issue

score 1 · Answer 13 · answered Nov 01 '22 at 12:26

1

For Rails/React, run the line below:

$ bin/rails webpacker:install:react

answered Nov 01 '22 at 12:26

daktari

91
1
8

score 0 · Answer 14 · 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 15 · 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,962
1
18
17

score 0 · Answer 16 · 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

score 0 · Answer 17 · answered May 05 '23 at 03:26

0

I got this error when converting a create-react-app to a vite application and I didn't change all the .js files to .jsx files. So just make sure to change all your .js files to .jsx files if converting.

answered May 05 '23 at 03:26

dustydojo

449
5
14

Madhu R · Answer 18 · 2022-11-08T05:13:44.560

-2

module.exports = {
   plugins: ["nativewind/babel"],
   presets: ['babel-preset-expo'],
  };

Make changes according the the link below to your babel.config.js

From https://www.nativewind.dev/quick-starts/create-react-native-app

and then just add the presets as shown above, it will work.

edited Nov 08 '22 at 05:13

answered Nov 08 '22 at 05:12

Madhu R

1
2

An answer needs to be complete enough to work even if links break. It's fine to refer to an external resource to give credit or provide pointers for optional information; but it needs to be supplemental to the answer, not essential. – Charles Duffy Jul 31 '23 at 20:34

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

18 Answers18

Linked