this.$q is undefined

rubs

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!

Hawkeye64

@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.

rubs

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

dobbel

@rubs

What’s the output of quasar info ?

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

rubs

@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.

dobbel

@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.

Hawkeye64

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.

rubs

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

rubs

This post is deleted!

rubs

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.

whoacowboy

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

dobbel

@whoacowboy

what’s the output of quasar info

No More Posting New Topics!

this.$q is undefined