TypeScript 和 Webpack 4，模块构建失败：意外令牌，预期为“，”

Question

我会马上警告你，我已经阅读了所有类似的问题

我在package.json babel 配置：

"babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "usage"
        }
      ],
      [
        "@babel/preset-react",
        {
          "useSpread": true,
          "development": true
        }
      ],
      [
        "@babel/preset-typescript",
        {
          "allExtensions": true
        }
      ]
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-object-rest-spread",
        {
          "loose": true,
          "useBuiltIns": true
        }
      ]
    ],
    "env": {
      "production": {
        "plugins": [
          "@babel/proposal-class-properties"
        ]
      }
    }

我的 webpack 配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = (env = {}) => {
    const {
        mode = 'development'
    } = env;

    const isProd = mode === 'production';
    const isDev = mode === 'development';

    const getStyleLoaders = () => {
        return [
            isProd ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader'
        ];
    };

    const getPlugins = () => {
        const plugins = [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, 'server', 'templates', 'index.html')
            }),
            new webpack.HotModuleReplacementPlugin(),
            new webpack.DefinePlugin({
                'process.env': {
                    BROWSER: true,
                    API_ROOT: JSON.stringify(process.env.API_ROOT || '')
                }
            }),
        ];

        if (isProd) {
            plugins.push(new MiniCssExtractPlugin({
                filename: 'main-[hash:8].css'
            }));
        }

        return plugins;
    };

    return {
        entry: [
            path.resolve(__dirname, 'app', 'components', 'App.js')
        ],
        mode: isProd ? 'production' : isDev && 'development',
        output: {
            filename: 'main-[hash:5].js',
            path: path.resolve(__dirname, 'public', 'assets'),
        },

        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                // Loading CSS
                {
                    test: /\.(css)$/,
                    use: getStyleLoaders()
                },

                // Loading SASS/SCSS
                {
                    test: /\.(sss)$/,
                    use: [...getStyleLoaders(), 'sass-loader']
                },
            ]
        },
        plugins: getPlugins(),
        devServer: {
            hot: true,
            stats: {
                colors: true
            }
        }
    };
};

尝试构建程序集时，出现以下错误：

ERROR in ./app/components/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/cpt/Desktop/novaya/dev/app/components/App.js: Unexpected token, expected "," (70:5)

  68 |          const ZoomInAndOut = ({ children, position, ...props }) => (
  69 |                  <Transition
> 70 |                    {...props}
     |                    ^
  71 |                    timeout={800}

我无法理解我的配置丢失了什么。 我尝试了几种不同的选择，到处都是这个错误。 我使用所有 npm 包的最新（当前是 2020.04.02）版本

UPD：出现新错误： https : //prnt.sc/qxf0pt

Answer 1

尝试像这样改变preset的顺序

 "presets": [
      ["@babel/preset-env", {"useBuiltIns": "usage"}],
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],