Troubleshooting React, Babel, and Webpack

React, Babel, Webpack not parsing JSX code

If you are encountering issues with React, Babel, and Webpack not parsing your JSX code, you’re not alone. This problem, often accompanied by error messages such as “Unexpected token” or “Module build failed,” can be frustrating to debug. Fortunately, there are several solutions you can try to resolve this issue.

1. Adding presets to babel-loader

A common cause of JSX parsing errors is the absence of presets in the babel-loader configuration. To address this, modify your webpack.config.js file:

{
  test: /\.jsx?$/,
  exclude: /node_modules/,
  loader: "babel-loader",
  presets: ['es2015', 'react']
}

By adding the ‘es2015’ and ‘react’ presets, you ensure that babel-loader can correctly process JSX syntax.

2. Render using React-DOM

If you are using React version 0.14 or above, make sure you are rendering your code using React-DOM rather than React.

import React from "react";
import ReactDOM from "react-dom";
import Greeting from "./greeting";

ReactDOM.render(
  <Greeting name="World"/>,
  document.body
);

Updating your code to use ReactDOM instead of React can help resolve JSX parsing errors.

3. Including babel-preset-react

If the above solutions do not work for you, consider installing the babel-preset-react module and configuring it in your project:

npm install babel-preset-react

Create a .babelrc file in your project directory and add the following content:

{
  "presets": ['react']
}

This approach has been reported to resolve the issue for some developers using multiple loaders or the react-hot loader alongside babel-loader.

4. Configure presets in webpack.config.js query

Another approach is to configure the presets in the query block of webpack.config.js:

query: {
  presets: ['react', 'es2015']
}

5. Adjust your .babelrc

In some cases, modifying the .babelrc file as shown below can help:

{
  "stage": 2,
  "env": {
    "development": {
      "plugins": [
        "react-display-name",
        "react-transform"
      ],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals":  ["module"]
          }]
        }
      }
    }
  }
}

Adding the above configuration to .babelrc may resolve the JSX parsing issue.

By following one or more of these solutions, you can usually overcome the problem of React, Babel, and Webpack failing to parse JSX code. Experiment with the suggested approaches and choose the one that works best for your specific setup. Enjoy coding with React!

reference : 

reactjs