I am new with reactjs. I read similar error post, Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled but can't solve my problem

Whe I run npm run dev

I have an error

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: -..../frontend/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (40:7):

  38 |   render() {
  39 |     return (
> 40 |       <ul>
     |       ^
  41 |         {this.state.data.map(contact => {
  42 |           return (
  43 |             <li key={contact.id}>

Add @babel/preset-react () to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx () to the 'plugins' section to enable parsing.

I read this text Add @babel/preset-react but I don't understand what should i do

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

index.js

import React, { Component } from 'react';
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  ponentDidMount() {
    fetch("api/lead")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong!" };
          });
        }
        return response.json();
      })
     ...

I am new with reactjs. I read similar error post, Syntax Error: Support for the experimental syntax 'jsx' isn't currently enabled but can't solve my problem

Whe I run npm run dev

I have an error

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: -..../frontend/src/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (40:7):

  38 |   render() {
  39 |     return (
> 40 |       <ul>
     |       ^
  41 |         {this.state.data.map(contact => {
  42 |           return (
  43 |             <li key={contact.id}>

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.

I read this text Add @babel/preset-react but I don't understand what should i do

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

index.js

import React, { Component } from 'react';
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  ponentDidMount() {
    fetch("api/lead")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong!" };
          });
        }
        return response.json();
      })
     ...

• javascript
• reactjs
• npm

5 Answers 5

First you need to run npm install --save-dev @babel/preset-react.

This will install @babel/preset-react package and add it to your package.json file.

Then you need to create a .babelrc file in your src folder and paste the following content in it:

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

After this, you can run npm run dev again.

For me this https://stackoverflow./a/52693007/10952640 solved.

TL;DR: You must have @babel/preset-react installed as devDep, and on babel config and weback as well.

A react app is translated to a "regular" javascript using Babel and bundled to a single js file using Webpack. You have to set a "preset", @babel/preset-react", for those to understand the React structure.

So as said by Dan Cantir you must first install the preset.

Then you must have it enabled on .babelrc (or other format you're using for babel config). My whole .babelrc:

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

Finally you must have it also set on webpack config file (some omitted):

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

For me even this does not work. Want to know why presets are not being recognised or working.

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-modules-monjs",
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "@babel/plugin-transform-react-jsx",
        "@babel/plugin-transform-modules-monjs"
      ]
    },
    "production": {
      "plugins": ["transform-remove-console"]
    }
  }
}

Add this to your jest.config.ts

    {
      ... 
      preset: 'ts-jest/presets/default-esm',      
      globals: {
        'ts-jest': {
          useESM: true
         }
      },
      ...
   }

1- change app.js to app.jsx.

2- npm install --save-dev @babel/preset-react.

3- create babel.config.json file.

4- add to this file :

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

for more : @babel/preset-react