Babel throws on JSX files when preset-react is not added.

[AbdelhayA0100]

"babel-loader": "^8.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"webpack": "^4.44.2",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.1"

const path = require("path");
var SRC_DIR = path.resolve(__dirname, "src");

///////////////////////////file web webpack.config /////////////////////////////
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx"],
alias: {
assets: path.resolve(__dirname, "src/assets/"),
},
},
module: {
rules: [
{
test: /.jsx?$/,
loader: "babel-loader",
include: __dirname + "/src/",
exclude: /node_modules/,
query: {
presets: ["babel-preset-myPreset", "@babel/preset-env"],
},
},
],
},
// resolve: {
// extensions: ["*", ".js", ".jsx"],
// alias: {
// assets: path.resolve(__dirname, "/src/Main/assets"),
// },
// },
};

ERROR in ./src/index.js 7:2
Module parse failed: Unexpected token (7:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| ReactDOM.render(

<React.StrictMode>
|
| </React.StrictMode>,

file index
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
<React.StrictMode>

</React.StrictMode>,
document.getElementById('root')
);

[JLHwung]

You need to add preset-react to your babel config

presets: ["babel-preset-myPreset", "@babel/preset-env", "@babel/preset-react"],

[AbdelhayA0100]

@JLHwung
i add this line presets: ["babel-preset-myPreset", "@babel/preset-env", "@babel/preset-react"], but same error
/////////////////////////// webpack.config /////////////////////////////
const path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

module.exports = {
mode: "development",
entry: SRC_DIR + "/index.js",
output: {
path: DIST_DIR + "/src",
filename: "bundle.js",
publicPath: "/src/",
},
resolve: {
extensions: [".js", ".jsx"],
alias: {
assets: path.resolve(__dirname, "src/assets/"),
},
},
module: {
rules: [
{
test: /.jsx?$/,
loader: "babel-loader",
include: __dirname + "/src/",
exclude: /node_modules/,
query: {
presets: [
"babel-preset-myPreset",
"@babel/preset-env",
"@babel/preset-react",
],
},
},
],
},
};

[hzoo]

I would think you should have a different error? https://github.com/babel/babel-loader#install

the packages you are installing are not the same name (the babel config and install should match): You'd need to install @babel/preset-react (note the scoped package) since the ones currently in package.json are older as well

"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",