Vue 模块解析失败:意外的标记 “??(空值合并运算符)”

huangapple go评论65阅读模式
英文:

Vue Module parse failed: Unexpected token "??" (Nullish coalescing operator)

问题

I recently updated the PrimeVue version of my project to the latest (3.26.1) and now I'm getting the following error when running 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) {

I figured out that the problem is the nullish coalescing operator in line 635 of virtualscroller.esm.js file, as it is shown in the logs above.

I tried adding the following plugin to my babel.config.js file, but nothing changed:

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

I'm totally ignorant about webpack and/or babel in-depth configurations, so I'm lost here and have no idea where to search for.

Does anyone know how to solve this issue?

英文:

I recently updated the PrimeVue version of my project to latest (3.26.1) and now I'm getting the following error when running 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

I figured out that the problem is the nullish coalesscing operator in line 635 of virtualscroller.esm.js file, as it is shown in the logs above.

I tried adding the following plugin to my babel.config.js file, but nothing changed:

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

I'm totally ignorant about webpack and/or babel in depth configurations, so I'm lost here and have no idea where to search for.

Does anyone know how to solve this issue?

Edit 1:

I tried adding transpileDependencies in my vue.config.ts file, but with no success either.

My vue.config.ts file:

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

Edit 2: My webpack setup is VUE CLI

答案1

得分: 4

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

只需运行vue upgrade命令,在被问到时选择'yes',所有与webpack/babel加载器相关的问题都解决了。

英文:

I've managed to solve this issue by upgrading Vue CLI 4 to Vue CLI 5.

Just needed to ran vue upgrade command, select 'yes' where it was asked and all my problems with webpack/babel loaders were gone.

huangapple
  • 本文由 发表于 2023年4月10日 21:44:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/75977662.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定