Bug in Vue v3.2.32/33 | Build Runtime Error | Cannot read properties of undefined (reading 'accessCache')

What happened?

As a developer that uses quasar using the Vite plugin When building a project that contains a quasar input component And previewing the build using npm run preview Then Vue throws an error Cannot read properties of undefined (reading 'accessCache')

You can find a codesandbox with the final build assets here: https://codesandbox.io/s/frosty-thunder-gxs0pt?file=/index.html

What did you expect to happen?

No error to happen in the final build

Reproduction URL

https://github.com/waldi/quasar-access-cache-bug

How to reproduce?

You can use the reproduction repo or create a new project from scratch:

1. Create a new Vite project (Basically following all steps here: https://quasar.dev/start/vite-plugin)

npm init vite@latest quasar-access-cache-bug -- --template vue
cd quasar-access-cache-bug
npm install quasar @quasar/extras
npm install -D @quasar/vite-plugin sass@1.32.0

1. Change files:

// main.js

import { createApp } from "vue";
import { Quasar } from "quasar";
import "@quasar/extras/material-icons/material-icons.css";
import "quasar/dist/quasar.css";

import App from "./App.vue";

const myApp = createApp(App);

myApp.use(Quasar, {
  plugins: {}, // import Quasar plugins and add here
});

myApp.mount("#app");

// vite.config.js

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { quasar, transformAssetUrls } from "@quasar/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    quasar(),
  ],
});

1. Use q-input component:

// App.vue

<script setup>
import { ref } from "vue";
const text = ref("");
</script>

<template>
  <q-input v-model="text"> </q-input>
</template>

<style></style>

1. Run npm run build && npm run preview
2. Open app in browser
3. Inspect developer console

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite), Components (quasar), SPA Mode

Platforms/Browsers

No response

Quasar info output

No response

Relevant log output

index.103dbd67.js:1 
TypeError: Cannot read properties of undefined (reading 'accessCache')
    at Object.defineProperty (index.103dbd67.js:1:45265)
    at Function.defineProperty (<anonymous>)
    at $n (index.103dbd67.js:1:55812)
    at cc (index.103dbd67.js:1:94717)
    at vc (index.103dbd67.js:1:96942)
    at setup (index.103dbd67.js:1:114952)
    at tt (index.103dbd67.js:1:12393)
    at pa (index.103dbd67.js:1:46698)
    at ma (index.103dbd67.js:1:46483)
    at I (index.103dbd67.js:1:34874)

Additional context

This bug seems to be related to the Vue version. If you fix the vue version in the package.json to: "vue": "3.2.25" then everything works fine.

[Trinovantes]

I ran git bisect on the vue repo and found this is the commit that broken ripple https://github.com/vuejs/core/commit/f44087e171282cb77f1e23d86516a527e4c5804b

The instance getting passed by invokeDirectiveHook is now a proxy object with only the component’s exposed field instead of everything in the original ComponentPublicInstance. This means the $q set on app.config.globalProperties is no longer available. This seems intentional as the docs say components using <script setup> are closed by default (https://vuejs.org/api/sfc-script-setup.html#defineexpose).

This means I have to explicitly run this code in my components that are using the v-ripple directive to expose the $q object

<script lang="ts" setup>
const $q = useQuasar()
defineExpose({
    $q,
})
</script>

[Luciden]

May be related going from 3.2.31 to 3.2.32 also using Quasar with VUE CLI.

Ripple.js:65 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘config’) at updateModifiers (Ripple.js:65:31) at beforeMount (Ripple.js:112:1) at callWithErrorHandling (runtime-core.esm-bundler.js:155:1) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:1) at invokeDirectiveHook (runtime-core.esm-bundler.js:3753:1) at mountElement (runtime-core.esm-bundler.js:4651:1) at processElement (runtime-core.esm-bundler.js:4581:1) at patch (runtime-core.esm-bundler.js:4501:1) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5052:1) at ReactiveEffect.run (reactivity.esm-bundler.js:185:1)