'emitsOptions' error impossible to debug

[soylomass]

Version

3.2.26 (Latest version)

Reproduction link

https://beta.deeeep.io/

Steps to reproduce

Not needed (I'm sorry for the lack of reproduction link, it's honestly impossible to create one at the moment)

What is expected?

More detailed error log

What is actually happening?

Many of my users are reporting errors on my Vue project, and what they get on the console is multiple of the following errors:

runtime-core.esm-bundler.js?5c40:958 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions')
    at shouldUpdateComponent (runtime-core.esm-bundler.js?5c40:958)
    at updateComponent (runtime-core.esm-bundler.js?5c40:4448)
    at processComponent (runtime-core.esm-bundler.js?5c40:4402)
    at patch (runtime-core.esm-bundler.js?5c40:3993)
    at patchBlockChildren (runtime-core.esm-bundler.js?5c40:4307)
    at patchElement (runtime-core.esm-bundler.js?5c40:4215)
    at processElement (runtime-core.esm-bundler.js?5c40:4073)
    at patch (runtime-core.esm-bundler.js?5c40:3990)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4608)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)

I'm not able to reproduce the problem as it seems to happen randomly, and the error itself does not give any helpful information.

Is there any way to debug this? Some aditional "console.log" I can add somewhere to know at least what component is failing?

Thanks in advance, I've been stuck with this for a few days.

[posva]

Hello, make sure to always provide a reproduction that follows the instructions at https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro.

Open a new issue with a reproduction that follows those instructions if you manage to create a boiled down reproduction.

Remember to use the forum or the Discord chat to ask questions!

[martijn10kb]

I have the same issue. Please reopen this

[HackyDev]

If you have v-for and v-if on the same element your code may throw this error.
I don't have this error when serving my app locally, only in production.

[martijn10kb]

We are using vue in jsx format, so we dont have any v-fors and v-ifs

[WangQingye]

I have the same issue, only in production env, cant find the reason

[martijn10kb]

@posva Please reopen this issue and look into it. We are all stuck on this issue..

[WangQingye]

I have the same issue, only in production env, cant find the reason

After stucking on this problem two days. Finally solved it, although i dont konw the real reason.
I have tried changing v-if to v-show, not works.
And changed my template slot to div, not works.
And then i found a strange thing is that when i leave a route path, i found the functions in the component is still working, so thats the reason why "Cannot read properties of null..."
in my case , i wrote a async function in setup , just like :
setup() { doSomeInit() ... }
I found that when leaving the route path , the doSomeInit function will still run one time.
And finally I moved it into onMounted, the problem is disapared.
setup() { onMounted( () => { doSomeInit() }) ... }

[lovexp1]

我也有同样的问题 v3.2.30

[vishnu947]

I have the same issue, only in production env, cant find the reason

After stucking on this problem two days. Finally solved it, although i dont konw the real reason. I have tried changing v-if to v-show, not works. And changed my template slot to div, not works. And then i found a strange thing is that when i leave a route path, i found the functions in the component is still working, so thats the reason why "Cannot read properties of null..." in my case , i wrote a async function in setup , just like : setup() { doSomeInit() ... } I found that when leaving the route path , the doSomeInit function will still run one time. And finally I moved it into onMounted, the problem is disapared. setup() { onMounted( () => { doSomeInit() }) ... }

can you please elaborately explain how you wrote

[superdiazzz]

I have same issue today, please anyone explain how to solve

[woai3c]

I have the same issue:

<teleport to=".component-ui-config-container">
            <div></div>
</teleport>

But finally, I solved the problem:

<teleport  v-if="isLoaded" to=".component-ui-config-container">
    <div></div>
</teleport>

const isLoaded = ref(false);
onMounted(() => {
    isLoaded.value = true;
});

[fangyong1003]

I have the same issue, only in production env, cant find the reason

解决了吗

[andreas83]

i had the same issue, i fixed it by simply defining a default value.

[signernet]

I had the same issue,and i fixed it by avoid use undefined properties in element-plus el-popover comonent.
my code is below
my content attribute has undefined value sometime;

 <el-popover placement="left" :width="400" trigger="hover" :content="scope.row.user?.branchPaths">
  <template #reference>
    <span style="cursor: pointer">
      {{ formatBranch(scope.row.user.branchPaths) }}
    </span>
  </template>
</el-popover>`

[maxirozay]

I had the same issue only in prod when I was modifying a computed property (which was updating a prop with v-model) and it seems I fixed it by changing some v-show to v-if... I have no clue as to why there was this issue or why I can fix i with v-for.

[4KDA]

is there a good solution?
You have to use the method woai3c

[ldsenow]

I am having the same issue. Just dont know how to resolve it. Can we reopen this issue to take a look?

[4KDA]

I am having the same issue. Just dont know how to resolve it. Can we reopen this issue to take a look?

+1

[aarie33]

same issue here.
the reason is because of v-if, you need to avoid v-if and change it to v-show
here is the discussion
https://forum.vuejs.org/t/emitsoptions-error-impossible-to-debug/125512/7

[Countingstars]

I have the same issue. I fixed it by changing variable name
before:
const emits = defineEmits(['click'])
after:
const emit = defineEmits(['click'])

[kenrowland]

FYI, I was able to clear this error by ensuring that my Vue components all at least have an empty emits member:

export default {
  ...
  emits: [],
  ...
}

[soylomass]

A maybe useful tip for anyone who is experiencing this error or the "insertBefore" one, I just solved one by using the "Break at catched exceptions" options in Chrome's DevTool.

Vue happens to catch and hide some template exceptions, so they won't show on console.

In this particular case, my template (at some step of the Vue render pipeline) was accessing a property of a null object. This in itself didn't cause any problem in development, but in production, (not immediately, but when switching to another component inside the same KeepAlive block) it triggered the "insertBefore" error breaking the website and requiring a refresh.

---

To use this feature, go to Sources, and click these checkboxes as marked in the picture:

Then try to replicate the problem, and a few steps before that problem you may run into a seemingly unrelated exception that triggers the domino effect. Actually I'd recommend running every function of your app with this option checked, as you'll probably discover a lot of similar exceptions that may some day break your Vue app.

@posva Do you have any idea on how a previous template exception can cause Vue to break irreparably at a future step, in production but not in development?

[posva]

Read and follow the links at #5184 (comment)
A proper repro is required