Search code examples
vue.jswebpackbabeljswebpack-dev-serverprimevue

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


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


Solution

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