使用jsx编译安装Webpack时出错

Question

I installed webpack and here is my webpack.config

 const path = require('path');
const HtmlWebPackPlugin = require('html-webpack- 
 plugin');
const MiniCssExtractPlugin = require('mini-css-extract- 
 plugin');
module.exports ={
mode:'development',
entry:'./src/scripts/app.js',
output:{path: path.resolve(__dirname,'dist') , 
filename:'bundle.js'},
module:{rules:[
    {
        test:/\.jsx?/i,
        exclude:/node_modules/i,
        use:{
            loader:'babel-loader',
            options:{
                presets:['@babel/preset-env']
            }
        }

  },
  {
    test:/\.s?css?/i,
    use:[
        {
            loader:MiniCssExtractPlugin.loader,
            options:{
                publicPath:'/dist'
            }
        },
        'css-loader',
        'sass-loader'
    ]
  }
 ]},
 plugins:[
    new HtmlWebPackPlugin({
        template:'./src/index.html',
        filename:'index.html'
    }),
    new MiniCssExtractPlugin({
        filename:'main.css'
    })
  ]
   }

and here is my package.json

    {
 "name": "webp",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "test",
 "build": "webpack"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3"
 },
"dependencies": {
"react": "^16.8.1",
"react-dom": "^16.8.1"
}
}

but it can not compile jsx . gives me this error

     class myHeading extends React.Component{
     6 |     render(){
  >  7 |         return <h1> A header will be rendered 
                            here</h1>
       |                ^
     8 |     }
     9 | }
    10 | 

I followed the same path as my friends in our course, they have no problem to install it, but I don't know what is the problem with my installation. can anybody help me please. it will be very appreciated.

Answer 1

You need @babel/preset-react in order to transpile jsx. You can install it with NPM or Yarn with the below scripts:

# NPM
npm i -D @babel/preset-react
# Yarn
yarn add -D @babel/preset-react

You also need to add the preset to your babel loader like below:

const path = require("path");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: "development",
  entry: "./src/scripts/app.js",
  output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" },
  module: {
    rules: [
      {
        test: /\.jsx?/i,
        exclude: /node_modules/i,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      },
      {
        test: /\.s?css?/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "/dist"
            }
          },
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "main.css"
    })
  ]
};