Module parse failed: Unexpected token You may need an appropriate loader to handle this file type.

[ddevopsrepos]

Hi Can you please help us to fix this issue

npm run watch

@ watch /var/www/stage-event-platform/web
cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

10% building modules 3/3 modules 0 active
Webpack is watching the files…
95% emitting
ERROR Failed to compile with 1 errors 11:40:14 AM

error in ./node_modules/v-tooltip/dist/v-tooltip.esm.js

Module parse failed: Unexpected token (1493:10)
You may need an appropriate loader to handle this file type.
| if (!this.popperInstance) {
| const popperOptions = {
| ...this.popperOptions,
| placement: this.placement,
| };

@ ./resources/client/assets/js/app.js 101:0-33
@ multi ./resources/client/assets/js/app.js
Asset Size Chunks Chunk Names
fonts/vendor/element-ui/lib/theme-chalk/element-icons.ttf?732389ded34cb9c52dd88271f1345af9 56 kB [emitted]
fonts/vendor/element-ui/lib/theme-chalk/element-icons.woff?535877f50039c0cb49a6196a5b7517cd 28.2 kB [emitted]
/client/js/app.js 12.1 MB 0 [emitted] [big] /client/js/app
/client/js/vendor.js 1.75 MB 1 [emitted] [big] /client/js/vendor
/js/app.js 224 kB 2 [emitted] /js/app
/client/js/manifest.js 3.84 kB 3 [emitted] /client/js/manifest
/css/app.css 219 kB 2 [emitted] /js/app
/client/css/app.css 8.86 kB 2, 2 [emitted] /js/app, /js/app

ERROR in ./node_modules/v-tooltip/dist/v-tooltip.esm.js
Module parse failed: Unexpected token (1493:10)
You may need an appropriate loader to handle this file type.
| if (!this.popperInstance) {
| const popperOptions = {
| ...this.popperOptions,
| placement: this.placement,
| };
@ ./resources/client/assets/js/app.js 101:0-33
@ multi ./resources/client/assets/js/app.js

[joao-p-pinto-findmore]

We're facing the exact same issue. It seems to have happened very recently. In our case we're using the "v-tooltip": "^2.0.2" version.

[Akryum]

Your webpack config seems to be misconfigured. There's nothing wrong with the JS in v-tooltip.esm.js

[tiagocostafdm]

Your webpack config seems to be misconfigured. There's nothing wrong with the JS in v-tooltip.esm.js

Thank you @Akryum .
That's weird because we didn't make any changes to our webpack configs and suddenly we have this issue. Anything else you suspect it might be?

[ddevopsrepos]

@tiagocostafdm that is exactly what i wanted to know

[tukangdezain]

we are facing the same issue as well. we are using ^2.1.1. on our case, this happened after we upgrade node into version 14.15.3.

[Akryum]

Made some changes to the babel plugin so it transpile vue script code with babel :|

[Akryum]

Still weird that your webpack setup can't handle standard modern js 🤔

[tukangdezain]

fixed, by manually include v-tooltip to use babel-loader in webpack config. in our case we are still using vue 2.5.x.

[ddevopsrepos]

@tukangdezain can share some more details how you did it

[mkhalid03]

@ddevopsrepos For a VUE 2 project generated through VUE CLI fixed the issue by adding

{
    test: /@?(floating-ui).*\.(ts|js)x?$/,
    loader: 'babel-loader'
}

under rules section in file webpack.base.conf.js