Unhandled error during execution of scheduler flush. Caused by computed

[lukaskoeller]

Version

3.0.4

Reproduction link

https://jsfiddle.net/Lb9gtx0w/2/

Steps to reproduce

Create a setup() function or computed: property and return a computed property of name type with value either "router-link" or "button". This computed property is then bind to the components attribute is.

What is expected?

The value of type is bind to the is attribute and no error/infinite loop is caused.

What is actually happening?

setup() is called again and again till the app is crashing.
Following errors are appearing:

runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <Button to="" fullWidth="true" class="full-width button" > 
  at <KeepAlive class="full-width button" > 
  at <Button to="" fullWidth="true" class="full-width button" > 
  at <KeepAlive class="full-width button" > 
  at <Button to="" fullWidth="true" class="full-width button" > 
  at <KeepAlive class="full-width button" > 

...and so on.

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:819)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4193)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4176)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4134)
    at processComponent (runtime-core.esm-bundler.js?5c40:4094)
    at patch (runtime-core.esm-bundler.js?5c40:3715)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4211)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)

Code excerpt

<template>
  <keep-alive>
    <component
      :is="type"
      :to="to"
      :fullWidth="fullWidth"
      :class="
        fullWidth
          ? 'full-width'
          : ''
      "
      class="button">
      <slot />
    </component>
  </keep-alive>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'Button',
  props: {
    to: {
      required: false,
      default: '',
    },
    fullWidth: { required: false },
  },
  setup(props) {
    const type = computed(() => (props.to ? 'router-link' : 'button'));

    return {
      type,
    };
  },
});
</script>

[lukaskoeller]

Issues with the same error:

• Unhandled error during execution of scheduler flush #2620
• Unhandled error during execution of scheduler flush. #1704

Closed PRs related to this issue:

• fix(runtime-core): normalize empty extra props to null for cloneVnode #1724

Question on Discord:

• Vue Land #composition-api

[posva]

Read https://new-issue.vuejs.org/?repo=vuejs/vue#why-repro and open a new issue with a finished repro on that jsfiddle

[lukaskoeller]

@posva you are totally right. I tried to replicate it in JSfiddle, but I couldn't. It is working there (https://jsfiddle.net/au6ot9yh/).
Nonetheless, the above described component <Button> is still showing the Error. I have another component <BottomButton>, with only negligible differences, that also doesn't show this error.

GitHub Repo

Differences between <Button> and <BottomButton>

1. Name is different
2. class name for styling is different

<BottomButton>

<template>
  <component :is="type" :to="to" class="bottom-button">
    <slot />
  </component>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'BottomButton',
  props: {
    to: {
      required: false,
    },
  },
  setup(props) {
    const type = computed(() => (props.to ? 'router-link' : 'button'));

    return {
      type,
    };
  },
});
</script>

<style scoped>
.bottom-button {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--spacing-7) var(--spacing-4);
  background-color: var(--primary-color-lighten-2);
  color: var(--text-color);
  text-decoration: none;
  border: none;

  font-size: var(--base-font-size);
}
</style>

<Button>

<template>
  <component :is="type" :to="to" class="button">
    <slot />
  </component>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'Button',
  props: {
    to: {
      required: false,
    },
  },
  setup(props) {
    const type = computed(() => (props.to ? 'router-link' : 'button'));

    return {
      type,
    };
  },
});
</script>

<style scoped>
.button {
  display: inline-block;
  padding: var(--spacing-7) var(--spacing-4);
  background-color: var(--primary-color-lighten-2);
  color: var(--text-color);
  border-radius: var(--button-radius);
  text-align: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  overflow: hidden;

  box-shadow: inset 0px 0px 0px 2px var(--primary-color-lighten-6);

  font-size: var(--button-font-size);
  transition: var(--transition);
}

.button:hover {
  background-color: var(--highlight-color);
}

.full-width {
  width: 100%;
}
</style>

[lukaskoeller]

Now I created another component <TestButton> that only differs from <Button> that its name: is accordingly. Implemented the same way <TestButton> is also showing no error anymore...

[lukaskoeller]

What is causing the error:

✅ Works fine

export default defineComponent({
  name: 'TestButton',

🚫 Causing above described error

export default defineComponent({
  name: 'Button',

[lukaskoeller]

Couldn't replicate the problem in a new vue-cli project. Really weird!

[andre-cgn]

Could you please re-open this ticket? The issue didn't magically disappear. If you don't use vue-cli but a webpack config with wp 5.27.0 and vue-loader 4.1.1 it can be re-procuded. For me it always happens when using component tag names with dashes. So using the tag name "value-input" causes the error while "valueinput" doesnt.

[m4heshd]

@andre-cgn I've ran into this multiple times. It's just an issue with HMR. Just rebuild and run your application. It should be fine.

[barayuda]

same Issue here:

anyone have face same issue?

Version: Vue 3.2.40

[wflixu]

same Issue here:

anyone have face same issue?

Version: Vue 3.2.40

I have the same problem

[wflixu]

same Issue here:
anyone have face same issue?
Version: Vue 3.2.40

I have the same problem

I refactored the code and the problem was solved. It was mostly reactive usage if you have the same warn.

[tylfin]

It looks like this issue is closed, but I recently ran into it with a dynamically rendered component. I found a couple of workarounds on StackOverflow, but none of those worked for me.

Eventually, I wrapped the component in a <KeepAlive> which actually made sense for what was happening in the form. Here's the snippet that worked for me:

    <KeepAlive>
      <component :is="foobar" />
    </KeepAlive>

Also noteworthy is I was only able to reproduce this in local dev mode, while others struggled to reproduce the same problem 🤷‍♂️