Vite Quasar Plugin - Dev Server Bootstrapping issue

[ChronosMasterOfAllTime]

What happened?

Hello, using the quasar vite plugin v1.3.3 I am getting the following error when the ESM bundles are being created:

chunk-XGACGZPK.js?v=56f045f9:1230 Uncaught TypeError: RefImpl is not a constructor
    at createRef (chunk-XGACGZPK.js?v=56f045f9:1230:10)
    at ref (chunk-XGACGZPK.js?v=56f045f9:1221:10)
    at chunk-E7NZVENM.js?v=56f045f9:49:32

I have tried removing the split chunks plugin and going barebones. This seems to be an odd issue with Vite 4.x and Quasar. I can get the dev server to run by commenting out the quasar plugin, but that defeats the purpose of using it. I also had to remove this for Vitest to work correctly.

What did you expect to happen?

The Dev Server bootstraps correctly and starts without failure.

Reproduction URL

https://stackblitz.com/edit/quasarframework-jflmsk

How to reproduce?

1. Go to the repro link
2. Wait for the dev server page to load
3. open dev tools
4. See error "RefImpl is not a constructor" in the console

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Plugins (quasar)

Platforms/Browsers

Firefox, Chrome, Safari, Microsoft Edge, Electron

Quasar info output

N/A - not using Quasar CLI

Relevant log output

chunk-XGACGZPK.js?v=56f045f9:1230 Uncaught TypeError: RefImpl is not a constructor
    at createRef (chunk-XGACGZPK.js?v=56f045f9:1230:10)
    at ref (chunk-XGACGZPK.js?v=56f045f9:1221:10)
    at chunk-E7NZVENM.js?v=56f045f9:49:32

Additional context

This is also an issue with Vitest. Removing the plugin from the vite configuration allows the tests to run.

It seems this is the line in question that's failing:

quasar/ui/src/plugins/Platform.js

Line 16 in 665baf7

: ref(

export const isRuntimeSsrPreHydration = __QUASAR_SSR_SERVER__
  ? { value: true }
  : ref(
    __QUASAR_SSR_CLIENT__ && (
      __QUASAR_SSR_PWA__ ? document.body.getAttribute('data-server-rendered') !== null : true
    )
  )

[ChronosMasterOfAllTime]

Any updates on this?

[jacksongross]

Can confirm this is affecting our apps as well when testing with vitest. Any update on a fix for this?

[raymondmuller]

+1

[AdamDrewsTR]

+1

[david-mohr]

I'm seeing the same error with cypress component tests

[david-mohr]

After some testing, it appears that import order matters. vue MUST be imported before anything else. In the linked code, if you open src/main.ts and move the following line to the top of the file, it starts working:

import { createApp } from 'vue';

Same fix works for cypress component testing, adding import 'vue' to the top of test/cypress/support/component.js gets the tests working again.

[jacksongross]

After some testing, it appears that import order matters. vue MUST be imported before anything else. In the linked code, if you open src/main.ts and move the following line to the top of the file, it starts working:

import { createApp } from 'vue';

Same fix works for cypress component testing, adding import 'vue' to the top of test/cypress/support/component.js gets the tests working again.

Can confirm adding import 'vue' to the top of test/cypress/support/component.js makes all my tests work again. Must be some weird import ordering behaviour indeed. Would be great to fix this if possible.

[ChronosMasterOfAllTime]

After some testing, it appears that import order matters. vue MUST be imported before anything else. In the linked code, if you open src/main.ts and move the following line to the top of the file, it starts working:

import { createApp } from 'vue';

Same fix works for cypress component testing, adding import 'vue' to the top of test/cypress/support/component.js gets the tests working again.

Can confirm adding import 'vue' to the top of test/cypress/support/component.js makes all my tests work again. Must be some weird import ordering behaviour indeed. Would be great to fix this if possible.

Import order was never an issue before. What changed? I would consider this a hack to fix the issue, when it should be reconciled by the transpiler and/or the plugins.