the npm start command runs normally, but the error will be reported when executing with npm run build as follows:
syntax error: Unexpected token (Unexpected token (26:6)
my index.js:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import registerServiceWorker from "./registerServiceWorker";
import "./App.css";
import Chat from "./chat/index";
import Login from "./login/index"
import {
BrowserRouter as Router,
Route,
Switch
} from "react-router-dom";
import { Provider} from "react-redux"
import store from "./store"
// const Home = () => (
// <div>
// <h3>Home</h3>
// </div>
// )
class App extends Component{
render(){
console.log(Router)
return (
<Router >
<div style={{height:"100%"}}>
<Switch>
<Route exact path="/" component={Login}/>
<Route path="/chat" component={Chat}/>
{/* <Route path="/home" component={Home}/> */}
<Route path="/login" component={Login}/>
</Switch>
</div>
</Router>)
}
}
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root"));
registerServiceWorker();
it looks like the jsx syntax has not been converted correctly, and my webpack.config.build is like this
module: {
strictExportPresence: true,
rules: [
{
test: /\.(js|jsx|mjs)$/,
enforce: "pre",
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve("eslint"),
},
loader: require.resolve("eslint-loader"),
},
],
include: paths.appSrc,
},
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve("url-loader"),
options: {
limit: 10000,
name: "static/media/[name].[hash:8].[ext]",
},
},
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve("babel-loader"),
options: {
compact: true,
},
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{
fallback: {
loader: require.resolve("style-loader"),
options: {
hmr: false,
},
},
use: [
{
loader: require.resolve("css-loader"),
options: {
importLoaders: 1,
minimize: true,
sourceMap: shouldUseSourceMap,
},
},
{
loader: require.resolve("postcss-loader"),
options: {
ident: "postcss",
plugins: () => [
require("postcss-flexbugs-fixes"),
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9", // React doesn"t support IE8 anyway
],
flexbox: "no-2009",
}),
],
},
},
],
},
extractTextPluginOptions
)
),
// Note: this won"t work without `new ExtractTextPlugin()` in `plugins`.
},
{
loader: require.resolve("file-loader"),
exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
options: {
name: "static/media/[name].[hash:8].[ext]",
},
},
],
},
Please give me some advice