Cannot read properties of null (reading 'emitsOptions')

[shiwanjun1995]

Vue version

3.2.25

Link to minimal reproduction

https://play.vuejs.org/#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

Steps to reproduce

When i comment out line 12, open line 13, the error appears!

What is expected?

No error.

What is actually happening?

Has error.

System Info

No response

Any additional comments?

Please fixed it.

[shiwanjun1995]

@https://github.com/posva

[yyx990803]

@https://github.com/posva

Do NOT at people like this. If someone has the bandwidth to handle this issue, they will.

[soletan]

Just came across the same error message in a bunch of basically different use cases. AFAICT, this particular issue is just a follow up to some other issue which is causing Vue to throw in a wrong moment such as the set up of a component in my case.

I was observing it several times within the last two hours due to some race conditions when a component's template is trying to de-reference something that hasn't been set, yet.

When looking into your code, there is a Vue warning regarding the fact that the Teleport target is null. As soon as you prevent the Teleport from being applied prior to having some actual target, the error is gone as you've mentioned in your post, too.

So, preferring Vue to not throw might be eligible, though it might just slow it down for no permanent benefit. And there is a warning you shouldn't ignore. It's there for a reason, I guess.

[BillyBobFry]

Similar to the comment above, I saw this error because of a teleport with null content. This was what the code was like:

  <Teleport>
    to="someLocator"
    :disabled="!someCondition"
  >
    <div v-if="someCondition">someContent</div>
  </Teleport>

I resolved the issue by updating it to

  <Teleport>
    to="someLocator"
    v-if="someCondition"
  >
    <div>someContent</div>
  </Teleport>

[Giwayume]

Ok, I am also dealing with this issue surrounding a teleport. I was using v-if statements, also a <transition> inside. If I remove all of that, and simplify it to:

<teleport to="body">
        <div>test</div>
</teleport>

The errors stop.

But the second I started adding back the original functionality, I noticed it throws an error just by adding an empty directive to the div, specifically when I do anything that causes that component to re-render (like changing the value of one of its props that's not even referenced by the template).

const vPointer = {};

<teleport to="body">
        <div v-pointer>test</div>
</teleport>

The error happens here, child is null https://github.com/vuejs/core/blob/main/packages/runtime-dom/src/nodeOps.ts#L50
Walking up the call stack, that function is called here

core/packages/runtime-core/src/renderer.ts

Line 2221 in 93d663a

hostRemove(el!)

Obviously that el! typescript non-null assertion is invalid. The code should be prepared so that it handles a null "el". The vnode referenced in this case that has a null "el" is the <div> with the v-pointer directive on it.

[Giwayume]

I tried Vue versions from the very latest 3.5.13 all the way back to 3.2.0 to check if this is a regression (can't go lower from other dependencies) and it breaks the same.