Vue CLI compilation error

[allurco]

Hi,

I am trying to use the Library but I am getting a weird error while compiling with Yarn and VUE CLI:

98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                      3:21:21 AM

 error  in ./node_modules/@vueuse/head/dist/index.mjs

Module parse failed: Unexpected token (199:26)
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
|   let newElements = tags.map((tag) => ({
|     element: createElement(tag.tag, tag.props, document),
>     body: tag.props.body ?? false
|   }));
|   newElements = newElements.filter((newEl) => {

 @ ./src/main.js 13:0-42 31:11-21
 @ multi (webpack)-dev-server/client?http://192.168.100.51:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js 

My Versions: "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-service": "~4.5.0",

Is there any solution for this?

Thanks!

[harlan-zw]

You'll need to tell webpack to transpile that file, Vue CLI provides a config for it https://cli.vuejs.org/config/#transpiledependencies

This might work

transpileDependencies: ['@vueuse/head'],

[saiyaff]

I am getting the same issue. And the answer here is not helping me as well.

You'll need to tell webpack to transpile that file, Vue CLI provides a config for it https://cli.vuejs.org/config/#transpiledependencies

This might work

transpileDependencies: ['@vueuse/head'],

And, I have a babel.config.js but not vue.config.js. Adding a new file for vue.config.js results in few other errors.

Any help appreciated!

[harlan-zw]

Can you provide a reproduction @saiyaff?

Otherwise, I'd recommend migrating to the latest recommended scaffolding https://vuejs.org/guide/scaling-up/tooling.html#project-scaffolding

Also please make a new issue as the solution I provided above should work if configured most Vue CLI applications.