@vue/compat: Cannot read property 'shapeFlag' of null

[jaulz]

Version

3.1.1

Reproduction link

Sorry, I tried my best but it seems to be a strange case where I cannot create a reproduction for.

Steps to reproduce

It seems to be related to "v-if".

What is expected?

Renderer should not trigger a dump.

What is actually happening?

The application dumps:

vendor.js:41509 Uncaught (in promise) TypeError: Cannot read property 'shapeFlag' of null
    at getNextHostNode (vendor.js:41509)
    at getNextHostNode (vendor.js:41510)
    at patch (vendor.js:40362)
    at patchBlockChildren (vendor.js:40688)
    at processFragment (vendor.js:40749)
    at patch (vendor.js:40387)
    at patchKeyedChildren (vendor.js:41141)
    at patchChildren (vendor.js:41084)
    at patchElement (vendor.js:40656)
    at processElement (vendor.js:40474)

Afterwards when I try to reverse the if condition this error is triggered:

vendor.js:41453 Uncaught (in promise) TypeError: Cannot read property 'type' of null
    at unmountComponent (vendor.js:41453)
    at unmount (vendor.js:41371)
    at unmountChildren (vendor.js:41505)
    at unmount (vendor.js:41389)
    at unmountChildren (vendor.js:41505)
    at unmount (vendor.js:41395)
    at unmountComponent (vendor.js:41473)
    at unmount (vendor.js:41371)
    at patchKeyedChildren (vendor.js:41255)
    at patchChildren (vendor.js:41084)

[LinusBorg]

We understand that providing a reproduction isn't always easy and even close to impossible in some rare edge cases.

That being said, you can surely provide a bit more than this?

• code in question
• "compat" - meaning this is a Vue 2 component runnning in compat mode? or aready moved to Vue 3?
• whats the compat config? All options enabled?
• ... anything else?

If you can't provide a runnable reproduction, please at least try to describe the setup and circumstances as close as possible..

[jaulz]

Thanks for the quick response! So, the code is actually part of a larger code base and I just switched to vue@3.1.1 using the compatibility mode (via webpack alias). Most of the code base consists of vue2 components but anyway I wanted to try the new compatibility version.

I thought it's maybe worth to open this issue as someone has immediately an idea. I will continue to isolate the exact component and see if I can trace down the issue. Will keep you posted...

[jaulz]

I think it's related to this piece of code in my dependencies:
https://github.com/inertiajs/inertia/blob/1580d2ba887c4f50b57e8dc0fa0707da3e123b2b/packages/inertia-vue/src/form.js#L181-L190

There is no render function and maybe thus the vnode is empty?

[leopiccionia]

I think it's related to this piece of code in my dependencies

I don't know if it helps, but have you tried replacing @inertiajs/inertia-vue with @inertiajs/inertia-vue3?

[jaulz]

@leopiccionia yep, that did the job and was anyway the longterm solution. Thanks! 😊 Shall we keep the issue open or is this error too specific?

[posva]

Thanks for the report, if you manage to boil it down, please open a new issue so we can look further.

[jaulz]

@posva actually, I traced it down to the code which I linked.

[posva]

@jaulz please read https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro

[titusdecali]

I have the same issue (it was near impossible to narrow down), but indeed was related to v-if
@jaulz Thank you for making this issue as I NEVER would have found it (this is the only thing that comes up on Google when I search 'shapeFlag error'.

In my case, it triggers whenever I add the highlighted line here, within Vue-Good-Table

I hope this helps add extra context.

[Daniel-Musunza]

i've got the same problem can i get some help
1st err

my app.vue

my productCard.vue

2nd err

my CartView.vue

[nntai]

I faced this issue when there's one data object is null/undefined and component access to its child value while mounting.
In @Daniel-Musunza case, it could be because product after find is null (not found) -> product.price throwing error.

[TO-smichaelsen]

Just sayin': I "resolved" this error by disabling my Adblocker chrome extension.

Chrome
Version 115.0.5790.173 (Offizieller Build) (64-Bit)
Extension
https://adblockplus.org/