`Uncaught TypeError: Cannot set properties of undefined (setting '$head')`

[deepfriedmind]

I've followed the installation instructions and when Vue.use(head) is run it errors out with:

Uncaught TypeError: Cannot set properties of undefined (setting '$head')

this happens in node_modules/@vueuse/head/dist/index.mjs on line 493, which is:

app.config.globalProperties.$head = head;

So here: https://github.com/vueuse/head/blob/main/src/index.ts#L159

I'm running Vue 2.7.13 and webpack 3.12.0 (can't currently update beyond webpack 3 due to other dependencies).

Full trace

index.mjs?f615:493 Uncaught TypeError: Cannot set properties of undefined (setting '$head')
    at Object.install (index.mjs?f615:493:1)
    at Vue.use (vue.common.dev.js?e87b:5670:1)
    at eval (main.js?3479:45:1)
    at Object.<anonymous> (app.js:4107:1)
    at __webpack_require__ (app.js:708:30)
    at fn (app.js:113:20)
    at Object.<anonymous> (app.js:4014:18)
    at __webpack_require__ (app.js:708:30)
    at app.js:806:39
    at app.js:809:10
install @ index.mjs?f615:493
Vue.use @ vue.common.dev.js?e87b:5670
eval @ main.js?3479:45
(anonymous) @ app.js:4107
__webpack_require__ @ app.js:708
fn @ app.js:113
(anonymous) @ app.js:4014
__webpack_require__ @ app.js:708
(anonymous) @ app.js:806
(anonymous) @ app.js:809

[vetruvet]

SUPER hacky and totally not recommended workaround I came up with: https://codesandbox.io/s/gracious-silence-4b9h00?file=/src/main.js

[harlan-zw]

Hey guys, I haven't done much around the Vue 2.7 compatibility, I just know it was meant to support it.

I've fixed that specific issue in 1.0.0-rc.12. As far as I know, Vue 2.7 supports the prove/inject API?

Can try it out and let me know if you have any further issues?

[vetruvet]

@harlan-zw rc.12 technically fixes the globalProperties error but there are still 2.7 compatibility issues, now these errors come up:

[Vue warn]: provide() can only be used inside setup().
[Vue warn]: injection "usehead" not found.
[Vue warn]: Error in setup: "Error: You may forget to apply app.use(head)"

[harlan-zw]

Hey @deepfriedmind. Thanks to @vetruvet's help, this should be fixed in v1.0.0-rc.14.

Please follow the v1 branch doc

// Vue 2
import { createHead, HeadVuePlugin } from "@vueuse/head"

Vue.use(HeadVuePlugin)
const head = createHead()

new Vue({
  el: '#app',
  // ...
  head,
})

Let me know if you have any issues with it