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
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.