Vue version

3.2.34

Link to minimal reproduction

https://github.com/snappykraken/app

Steps to reproduce

It looks like this problem occurs only on some pages of our large SPA. When I try to use Vue Router to navigate somewhere else from such a page, I get an error.

I have spent some time creating a reproducer on StackBlitz but I was unable to get the error I'm seeing in our application. It's probably a more complex problem that highly depends on the context and cannot be easily reproduced.

What is expected?

There shouldn't be any error thrown.

What is actually happening?

When I try to navigate to another page, I get the following error:

TypeError: Cannot read properties of null (reading 'length')
    at cu (runtime-core.esm-bundler.js:323:67)
    at Vv (runtime-core.esm-bundler.js:371:5)

I can see in Bugsnag that the error is thrown exactly on this line: https://github.com/vuejs/core/blob/74d2a76af6e830af5abb8aac8484dc1b3e90a510/packages/runtime-core/src/scheduler.ts#L165

System Info

System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Memory: 4.20 GB / 30.65 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.1.0 - /usr/bin/node
    Yarn: 1.22.10 - ~/.npm-global/bin/yarn
    npm: 8.5.5 - ~/.npm-global/bin/npm
  Browsers:
    Brave Browser: 101.1.38.119
    Chromium: 101.0.4951.64
    Firefox: 100.0
  npmPackages:
    vue: ^3.2.34 => 3.2.36

Any additional comments?

Everything was working fine in Vue 3.2.33 but I started getting these errors after I updated to version 3.2.34. I think commit https://github.com/vuejs/core/commit/74d2a76af6e830af5abb8aac8484dc1b3e90a510 has introduced this problem.

It could probably be fixed by changing the code on the line mentioned above to this:

preFlushIndex < (activePreFlushCbs?.length ?? 0);

But it may also be a symptom of a more serious problem that would stay hidden after making this change.

I encountered the same issue in 3.2.37.

@qmhc I'm using the following script as a workaround:

import {readFileSync, writeFileSync} from 'fs';
import path from 'path';

const filePath = path.resolve('./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js');
const content = readFileSync(filePath, 'utf8');

const modifiedContent = content.replace('activePreFlushCbs.length', '(activePreFlushCbs?.length ?? 0)');
writeFileSync(filePath, modifiedContent, 'utf8');

But hopefully, my pull request will get merged soon.

I met this problem too. It seems like an async problem. I try my best made a minimal reproduction. This problem can be fixed by nextTick:

function createMessage() {
  nextTick(() => ElMessage('Bug occurs'))
}

or change open event to opened event:

<el-drawer v-model="drawer" title="I am the title" @opened="createMessage">
  <span>Hi, there!</span>
</el-drawer>

I have also encountered this issue. I agree the fix from @livthomas should work.

Same issue is happening to me. Like @livthomas mentioned it's something to do with AG Grid. My workaround is to use patch-package and the changes to the file he wrote.

Bumping this thread--this change would be very useful for me and my team, we're using AG Grid and running into this issue. Patch is working for now but not a great long-term solution for us.

For anyone wanting the patch file that can be used with patch-package:

patches/@vue+runtime-core+3.2.36.patch

diff --git a/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js b/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
index 615651f..1ce255e 100644
--- a/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
+++ b/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js
@@ -320,7 +320,7 @@ function flushPreFlushCbs(seen, parentJob = null) {
         if ((process.env.NODE_ENV !== 'production')) {
             seen = seen || new Map();
         }
-        for (preFlushIndex = 0; preFlushIndex < activePreFlushCbs.length; preFlushIndex++) {
+        for (preFlushIndex = 0; preFlushIndex < (activePreFlushCbs?.length ?? 0); preFlushIndex++) {
             if ((process.env.NODE_ENV !== 'production') &&
                 checkRecursiveUpdates(seen, activePreFlushCbs[preFlushIndex])) {
                 continue;

This worked for me at least. Thanks, @nevecex for your (hotfix) solution.

Just run into this issue today on "vue": "^3.0.0"

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length')
    at flushPreFlushCbs (runtime-core.esm-bundler.js?f781:323:1)
    at flushJobs (runtime-core.esm-bundler.js?f781:371:1)
flushPreFlushCbs @ runtime-core.esm-bundler.js?f781:323
flushJobs @ runtime-core.esm-bundler.js?f781:371

Still waiting for the fix to be merged.

The original problematic code is no longer present after https://github.com/vuejs/core/commit/78c199d6dbe8931520b75d8bfe0d49366a06922a which was released in 3.2.38, so the issue should no longer be relevant.