How to use UMD Quasar in existing express site with requirejs?

[thijs]

I'm trying to figure out how to progressively start using Quasar in my existing website (which I want to move towards a PWA). The site is built with express using requirejs and backbone.

I've got the super simple Vue example working, basically from here.

All in-line in my main html page. I get a button and when I click it the counter goes up by one. Great.

Next step is to use Quasar. But as soon as I add the Quasar script tag to include it I get an error.

Just adding <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script> below the one for vue, in my console I get a 404 for vue.js and this requirejs error:

require.js:70 Uncaught Error: Script error for: vue
[...]

I don't get why requirejs is suddenly wanting to get vue, as this is all done in my plain html file. And Vue was already working fine, just adding the Quasar script triggered this, so it looks like it's something that Quasar is doing/trying?

But okay, vue.js is requested from my backend, so I added it (the same file already included with the script tag for vue), but then I get the following error:

quasar.umd.prod.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'ref')
    at quasar.umd.prod.js:6:396
 [...]

Well, obviously that wasn't going to work anyway, but I'm stuck. How do I get Quasar to just use the Vue already loaded in the html file? What is going on here?

[pdanpdan]

What Vue are you loading?
Qv2 requires Vue 3, Qv1 Vue 2

[thijs]

The one from the Quasar UMD CDN install page:

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>

[thijs]

Okay, so I think I may have found the issue. I don't really understand it all, but it looks like having jquery in the mix is causing problems.

At the start of quasar.umd.js is this piece of code:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) :
  typeof define === 'function' && define.amd ? define(['vue'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Quasar = factory(global.Vue));
})(this, (function (vue) { 'use strict';

To me it looks like this is trying to figure out where to get a reference to Vue from.

Using console.log I figured out that in my setup exports and module are undefined, so the first check falls through.

The typeof define is indeed a function and define.amd does return a true value, but I think this is not the value it's looking for. That is, the value is:

{
  jQuery: true
}

So, the code tries to do define(['vue'], factory), but that clearly is not working.

If I comment out the checks and only leave the last part in, thus:

(function (global, factory) {
            global = typeof globalThis !== 'undefined' ?
                globalThis :
                global || self, global.Quasar = factory(global.Vue)
})(this, (function (vue) { 'use strict';

(And actually, I know globalThis is a correct reference to window and has .Vue defined, so I think this just uses globalThis)

I get no errors anymore, and I can actually show a notification with

            <button @click="$q.notify('notified!')">notify</button>

So all then seems to work.

Now, is this a problem in Quasar? Vue? RequireJS? Where do I report this issue? Or have I just done something wrong somewhere?