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>

Issues with the same error:

• #2620
• #1704

Closed PRs related to this issue:

• #1724

Question on Discord:

• Vue Land #composition-api

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

@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>

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...

What is causing the error:

✅ Works fine

export default defineComponent({
  name: 'TestButton',

🚫 Causing above described error

export default defineComponent({
  name: 'Button',

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

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.

@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.

same Issue here:

anyone have face same issue?

Version: Vue 3.2.40

same Issue here:

anyone have face same issue?

Version: Vue 3.2.40

I have the same problem

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.

@posva this issue is not fixed. If you're only willing to address issues with minimal reproducible examples, then you shouldn't ask people to open issues (see the warning messages above).

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 🤷‍♂️