this.$q is undefined

  • Hi,

    I’m trying to deploy a minimal app (it’s essentially the quasar-cli example) but I keep getting the error [Vue warn]: Error in data(): “TypeError: Cannot read property ‘screen’ of undefined”. The template at MayLayout.vue starts with <q-layout>. The trace shows the error is at QLayout.js, line 43:

    height: this.$q.screen.height,

    As a test, I’ve replaced <q-layout> with <q-btn icon="help" />. This gives [Vue warn]: Error in render: “TypeError: Cannot read property ‘platform’ of undefined” at QBtn.js, line 71:

    if (this.$q.platform.has.touch === true) {

    So the obvious conclusion is that this.$q is undefined in those files, which I confirmed using the Chrome debugger. In the vue file, however, <div>{{ $q }}</div> shows $q normally.

    Do any of you know of any condition that would make $q unavailable to the Quasar modules?

    Any help is much appreciated. Thanks in advance!

  • @rubs I have seen sometimes when this happens, to remove node_modules / yarn.lock / package-lock.json and re-install yur node_modules and build again.

  • Actually I already did this, several times. I even cleared up all my global npm modules and reinstalled everything, to no effect. Thanks anyway!

  • @rubs

    What’s the output of quasar info ?

    What if you try it in a VM or other computer?

  • @dobbel, quasar info shows this:


    What if you try it in a VM or other computer?

    The project works in my colleague’s machine, so something must be different here. However I have many other Vue / Quasar projects and this is the only one with this kind of problem. (It’s the only one that uses quasar-cli. My other ones use vue-cli and Quasar as a plugin).

    I can make the project available for testing if it helps.

  • @rubs

    One thing I notice: don’t use node 14.x with Quasar cli( that’s what I have been told). Use the latest 12.x.

    Sure you can post a repo and I will take a look at it.

  • Ah yes @rubs as @dobbel said, don’t use Node 14, go back to Node 12+. Node 14+ breaks webpack. We’re still waiting on upstream packages to catch up.

  • Okay, I’ll try going back to 12.x and I’ll let you guys know. Thanks for the time being.

  • This post is deleted!

  • I thought the problem was gone, but no. Going back to 12.x allowed the app to be built, but unfortunately it seems the problem is still there.

  • @rubs @Hawkeye64 @dobbel Any luck with this. I am having the same issue.

  • @whoacowboy

    what’s the output of quasar info

Log in to reply