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

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

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

<style></style>

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

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 vuejs/core#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]

vuejs/core@f641c4b

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

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

#13681
#13488
#13242
#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.