React build Times wrong: syntax error: Unexpected token (26:6)

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


No, but I suggest babel


 {
            test: /\.(js|jsx|mjs)$/,
            include: paths.appSrc,
            loader: require.resolve('babel-loader'),
            options: {
              compact: true,
              presets: ['es2015', 'react']
            },

solve it by yourself, it's hard to do it alone


this presets should be added to the .babelrc file.


I would like to ask the author, have you solved this problem and how? I have the same problem, please let me know

Menu