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

Posted 2023-03-13

【中文标题】TypeScript 和 Webpack 4，模块构建失败：意外的令牌，预期的“，”

【英文标题】：TypeScript and Webpack 4, Module Build failed: Unexpected token, expected ","

【发布时间】：2020-05-20 07:27:12

【问题描述】：

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

我在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

【问题讨论】：

你试图在JS文件中使用Typescript语法，删除: any和: void

@RafalLesniak 我需要保留 Typescript。但是感谢您的提示

尝试将文件重命名为App.ts 或使用allExtensions: true 此处提及babeljs.io/docs/en/babel-preset-typescript

@AneesMuhammed 有帮助，谢谢！但是发生了另一个错误prnt.sc/qxf0pt

@A.Burdonskaya 对我来说，发现问题很痛苦，但最终解决起来很简单。我使用 flow-to-ts 将 out 项目中的所有文件转换为 typescript，而给我错误的文件被错误地转换为 .ts 扩展名，因为它包含 jsx。我将其重命名为 .tsx 并有所帮助。所以也许扩展是导致你问题的原因。尝试将文件重命名为 .jsx 或 .tsx 看看是否有帮助。

【参考方案1】：

尝试像这样更改preset 的顺序

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