How to fix React, Babel, and Webpack not parsing JSX code?

Spread the love

To fix React, Babel, and Webpack not parsing JSX code, we add make a few webpack config changes.

For instance, in webpack.config.js, we write

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

to add the 'react' preset so that Webpack will parse the JSX code in .jsx files.

We specify the preset is to be used with any files that has .jsx as the extension by setting test to /.jsx?$/

By John Au-Yeung