react build时报错：syntax error: Unexpected token (26:6)

Question

使用 npm start命令运行正常，使用npm run build执行会报错如下：

syntax error: C:/Users/wenji/Desktop/my-react-app/src/index.js:
Unexpected token (26:6)

我的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();

看起来像是jsx语法没有被正确的转化，我的webpack.config.build是这样的

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]',
            },
          },
          
        ],
      },

请为我指点迷津

Answer 1

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

自己解决了，一个人干真难受

Answer 2

没遇到过不过我建议换成babel

Answer 3

应该把这个presets加到.babelrc文件中。

Answer 4

请问作者，你这个问题解决了吗，是怎么解决的？我遇到了同样的问题，请赐教