vueuse / head

Document head management for Vue. Powered by Unhead. - 🌇 Sunset

Home Page:https://unhead.unjs.io/setup/vue/installation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Errror after updating from 0.7.7 and up

j0hnnyx opened this issue · comments

For few months I've used: "@vueuse/head": "0.7.6" then when I accidentally updated to the latest version found an error below.
I've checked and the last version that works is 0.7.7 all above that fails.

 ERROR  Failed to compile with 1 error6:59:52 PM

 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 2:0-42 15:13-23
 @ multi (webpack)-dev-server/client/index.js (webpack)/hot/dev-server.js ./src/main.js

<s> [webpack.Progress] 100%

package.json:

  "dependencies": {
    "@stripe/stripe-js": "^1.22.0",
    "@vueuse/head": "^0.7.8",
    "axios": "^0.24.0",
    "bulma": "^0.9.4",
    "bulma-toast": "^2.4.1",
    "core-js": "^3.6.5",
    "dayjs": "^1.10.7",
    "js-cookie": "^3.0.1",
    "moment": "^2.29.1",
    "nprogress": "^0.2.0",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@creativebulma/bulma-collapsible": "^1.0.4",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2"
  }

Hey @j0hnnyx

The issue is that the package has been built for ES2020, above what you're using (it's available in node 14.x). You can use https://cli.vuejs.org/config/#transpiledependencies to transpile the package to something that it can understand.

Something like this should work

transpileDependencies: ['@vueuse/head']

Yes this worked perfectly, thank you!

Closing.