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

[waldi]

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

2. 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(),
  ],
});

3. Use q-input component:

   
   // App.vue

4. Run `npm run build && npm run preview`
5. Open app in browser
6. 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

```Shell
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.

[koernchen02]

I just noticed the same.

This is related to https://github.com/vuejs/core/pull/5417 and the release of vue v3.2.32 https://github.com/vuejs/core/releases/tag/v3.2.32

Relevant Log Output in debug mode:

TypeError: Cannot read properties of undefined (reading 'accessCache')
    at Object.defineProperty (runtime-core.esm-bundler.js:6823:1)
    at Function.defineProperty (<anonymous>)
    at injectProp (inject-obj-prop.js:2:10)
    at use_validate (use-validate.js:210:13)
    at use_field (use-field.js:173:7)
    at setup (QInput.js:395:30)
    at callWithErrorHandling (runtime-core.esm-bundler.js:155:1)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7072:1)
    at setupComponent (runtime-core.esm-bundler.js:7028:1)
    at mountComponent (runtime-core.esm-bundler.js:4937:1)

[koernchen02]

And its not vite related, same behaviour in webpack

[MilosPaunovic]

Every vue dependency in project is added with a caret, meaning if you run npm i vue it should, technically, install proper patch version and fix problem.

https://stackoverflow.com/a/22345808

^version **Compatible with version,** will update you to all future minor/patch versions, 
without incrementing the major version. ^2.3.4 will use releases from 2.3.4 to <3.0.0.

[waldi]

@MilosPaunovic that's not the solution, that's the problem in this case. the latest patch version breaks the build.

[MilosPaunovic]

Ohh, sorry, ignore my comment from above in that case.

What you could to is downgrade Vue version manually until they release a fix with a npm i vue@3.2.31 or last one that worked for you.

[jonathanpmartins]

Same problem here, thanks for the fix instruction. Fixing the npm version of vue to 3.2.31 solved the problem!

[YukhymchukVolodymyr]

I have the same problem on prod, but on localhost quasar dev and quasar build works fine - no error

@MilosPaunovic thank you, downgrade to vue 3.2.31 solved the problem.

[oomisaki]

I have the same problem! thank you!!

[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)

[waldi]

https://github.com/vuejs/core/commit/f641c4b2289dfdbbbea87538e36fa35f2a115ddc

[kiatng]

This happens to UMD as well. All input elements are not rendered. Error in console:

TypeError: can't access property "accessCache", e.$ is undefined

To fix, specify the specific ver:

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

[MilosPaunovic]

Patch version of Vue, 3.2.33 is released with a solution to this problem. Anyone stumbling upon it should run npm i vue to get the newest version.

https://github.com/vuejs/core/releases/tag/v3.2.33

[Liwoj]

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)

Also getting this even after upgrading to 3.2.33 (Qusar + Vite) So it is probably a bit different problem.

[hendrik-schneider]

Patch version of Vue, 3.2.33 is released with a solution to this problem. Anyone stumbling upon it should run npm i vue to get the newest version.

https://github.com/vuejs/core/releases/tag/v3.2.33

Worked for me. Thank you. I got the error using webpack.

[AGPDev]

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)

Also getting this even after upgrading to 3.2.33 (Qusar + Vite) So it is probably a bit different problem.

Mee too, but i use @quasar/vite-plugin

[bompus]

I'm still getting the same Ripple.js error mentioned by others, it seems related. Works in vue 3.2.31, errors in 3.2.32 and 3.2.33

Debugging, it appears that instance.$q is undefined on some early calls, but then becomes defined after some ticks.

[Luciden]

I'm still getting the same Ripple.js error mentioned by others, it seems related. Works in vue 3.2.31, errors in 3.2.32 and 3.2.33

Debugging, it appears that instance.$q is undefined on some early calls, but then becomes defined after some ticks.

Same, still erroring on 3.2.33 for Ripple.js

[softbeehive]

I experience the same issue with v-ripple directive

• vue@3.2.33
• quasar@2.6.6

Uncaught TypeError: instance.$q is undefined
    updateModifiers Ripple.js:65

const cfg = Object.assign({}, instance.$q.config.ripple, modifiers, value)

Latest changes in Vue: https://github.com/vuejs/core/commit/f641c4b2289dfdbbbea87538e36fa35f2a115ddc

@rstoenescu, please consider reopening it until the fix is confirmed, because those who use v-ripple get unhandled error that terminates the program

[MiracleLinAlpha]

vue 3.2.33 still have this error，when use script-setup

[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>

[Liwoj]

@Trinovantes Great observation. This really seems like a core of the issue. But I doubt this is intentional. What is the point of globalProperties if they are not exposed by default ?

[Tofandel]

@Liwoj globalProperties are discouraged, they were mostly a tool to migrate from vue 2 to vue 3 easily and it's only meant for option api components, because in vue3 everything global was phased out and setup components should indeed be closed

So what quasar should do in this case is use provide inject, which is the recommended way to provide this kind of features with composables But it doesn't seem to be possible to do within directives yet https://github.com/vuejs/core/issues/5002

[axe-me]

it works now after I degrade vue to 3.2.26

[ragokan]

Hello, I also had these problems. When I downgraded, it started working fine.

[sageworksstudio]

FWIW...

According to the ripple effects docs It seems that using v-ripple directive on any component that already has ripple baked causes the issue, but for me that wasn't enough. Removing the v-ripple directive entirely from every component that used it actually fixed the issue for me.

Example: q-item uses the v-ripple directive without ripple being baked in, but the same issue occurs unless v-ripple is removed.

[Luciden]

FWIW...

According to the ripple effects docs It seems that using v-ripple directive on any component that already has ripple baked causes the issue, but for me that wasn't enough. Removing the v-ripple directive entirely from every component that used it actually fixed the issue for me.

Example: q-item uses the v-ripple directive without ripple being baked in, but the same issue occurs unless v-ripple is removed.

I removed the ripple directive and it works fine now.

[memotux]

With the v-ripple directive issue. From comments, there are 3 immediate work around:

1. Downgrade to vue 3.2.31
2. Keep vue ^3.2.33, that is now the recommended. Since latest update on vue, the developer need to explicit defineExpose({ $q }) on <script setup> on components using v-ripple.
3. Stop using v-ripple on your components 😢.

But I like to propose to another temporary solution:

• Add Optional chaining to Ripple.js:65 => const cfg = Object.assign({}, instance?.$q?.config?.ripple, modifiers, value).

I'm have created a PR proposing this change.

There is still the issue with vue ^3.2.33 not injecting $q and losing quasar.config, that need another workaround than defineExpose, but when this issue go fix, the optional chaining will be still valid.

[chuoke]

There is still the issue with vue 3.2.34

[qxygene]

"vue": "^3.2.35" still not solved.

[azapater]

Same problem here using the v-ripple directive. If I remove it the script setup works fine.

Vue: 3.2.36 Quasar: 2.7.1

[jonathanpmartins]

I'm still using Vue 3.2.31 without problems. Quasar 2.7.1

[Bosphoramus]

😢

[Webprogr]

We too with the problem 'undefined (reading 'accessCache')' Yes it is a big problem. No q-input text fields can be seen/visible in any FORM in Android, but ordinary html <input fields are visible. I changed the latest quasar, I meant changed the package.json to "vue": "3.2.31" and everything works fine! Very surprised

[bartduisters]

I've started from the repro repo provided. From 3.2.33 onwards the issue no longer occurs. As @MilosPaunovic mentioned on 14th of april, this is the patch version that fixes the problem mentioned in this issue.

This issue can be closed.

The people having issues with v-ripple directive should create a repro repo with the exact steps to trigger the issue. Adding v-ripple on a div in this repo with Vue on version 3.2.33+ doesn't have an error.

[NGPixel]

@rstoenescu Why was this issue closed? The issue is clearly NOT fixed.

I made a reproducible repo, created via quasar-cli, where I simply modified the MainLayout.vue file with a q-list and q-item elements with the v-ripple applied. That page crashes with the error TypeError: Cannot read properties of undefined (reading 'config'). Removing the v-ripple directive of all elements resolves the issue (but no more ripple effect).

https://github.com/NGPixel/broken-quasar-vripple-proof

Your own docs provide examples with the v-ripple on q-item elements so I would expect this to work just fine with the latest version, but it does not.

[jblyberg]

@rstoenescu I second that it's premature to close this issue as it continues to persist for me as well with vue 3.2.32-3.2.37.

[bartduisters]

The original issue isn't about v-ripple. Using the reproduction repo provided, the issue of this issue is fixed from 3.2.33 onwards. Also, in the reproduction repo v-ripple does work. But v-ripple wasn't mentioned once, q-input in a build version was the issue.

If you have a different issue, then please do make a reproduction repo and create a separate issue such that that error can be investigated/fixed.

I stand by the statement that the logged issue, is fixed in 3.2.33 and higher.

As for the v-ripple issue (that is not part of the original logged issue), a workaround is posted in this response.

[jblyberg]

That's understandable except there have been numerous other issues about this issue vis v-ripple that have been closed in favor of or merged into this one.

https://github.com/quasarframework/quasar/issues/13681 https://github.com/quasarframework/quasar/issues/13488 https://github.com/quasarframework/quasar/issues/13242 https://github.com/quasarframework/quasar/issues/13213

[bompus]

@bartduisters Other tickets that were opened mentioning v-ripple were closed as duplicates of this issue. Apart from the other linked tickets, ripple is mentioned 42 times in this issue, just not in the initial report description.

The other tickets should be re-opened if they truly aren't duplicates, even though it's the same exact error.

[NGPixel]

Then please add the workaround to the docs so that we don't have to go through 10s of various issues that incorrectly links to each other.

Anyone trying to use v-ripple with vue 3 composition API will run into this issue and it's really not obvious what the solution is, even after going through all these posts.

---

For anyone landing on this issue and have the v-ripple problem when using <script setup>:

<script setup>
import { useQuasar } from 'quasar'

const $q = useQuasar()
defineExpose({ $q })

[bartduisters]

To me it's clear that this is not a duplicate (since this issue is fixed, and the v-ripple clearly isn't), at the point the others were closed in favor of this one, it was perhaps not that clear.

I looked into the repro repo and the logged issue and wasn't able to reproduce in 3.2.33 - hence, my suggestion to close.

I'm in favor of having a clear new issue with a repro repo for the v-ripple issue, which has the workaround mentioned on top. That way people don't have to scroll, the workaround is on the relevant issue right on top.

As for the docs, you can pull request the workaround at the spot you think it fits. Then the team with merge permission can merge.

Indeed as @NGPixel mentions, the workaround provided by @Trinovantes here works for the v-ripple issue until a real fix is available.

[NGPixel]

Opened #13732 for the v-ripple issue.