vue.js - Vue模块解析失败: Unexpected token "??" (Nullish coalescing operator)

Question

我最近将项目的 PrimeVue 版本更新到最新版本 (3.26.1)，现在运行 npm run dev 时遇到以下错误:

ERROR  Failed to compile with 1 error                                10:32:46 AM
error  in ./node_modules/primevue/virtualscroller/virtualscroller.esm.js

Module parse failed: Unexpected token (635:39)
You may need an appropriate loader to handle this file type, currently no loaders are 
configured to process this file. See https://webpack.js.org/concepts#loaders
|         },
|         getPageByFirst(first) {
>             return Math.floor(((first ?? this.first) + this.d_numToleratedItems *4) / (this.step || 1));
|         },
|         isPageChanged(first) {

@ ./src/main.ts 48:0-55 73:631-646
@ multi (webpack)-dev-server/client?http://192.168.0.11:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

我发现问题出在 virtualscroller.esm.js 文件第 635 行中的空合并运算符，如上面的日志所示。

我尝试将以下插件添加到我的 babel.config.js 文件中，但没有任何变化:

{
    "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

我对 webpack 和/或 babel 的深度配置一无所知，所以我在这里迷失了方向，不知道在哪里搜索。

有人知道如何解决这个问题吗？

编辑1:

我尝试在 vue.config.ts 文件中添加 transpileDependency，但也没有成功。

我的 vue.config.ts 文件:

export default {
    devServer: {
        port: process.env.VUE_APP_PORT || 8081,
        proxy: process.env.VUE_APP_API_ROOT || 'http://localhost:8080/',
        https: true
    },
    configureWebpack: {
        output: {
            libraryExport: 'default',
            resolve: {
                symlinks: false
            }
        }
    },
    transpileDependencies: ['primevue']
}

编辑 2:我的 webpack 设置是 VUE CLI

Answer 1

我已经通过将 Vue CLI 4 升级到 Vue CLI 5 解决了这个问题。

只需运行 vue Upgrade 命令，在询问时选择"is"，然后我所有的 webpack/babel 加载器问题都消失了。