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> | <App /> | </React.StrictMode>,

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

ReactDOM.render( <React.StrictMode> <App /> </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",