Error in webpack installing with jsx compiling - reactjs

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"
})
]
};