Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Encountered Error Maximum call stack size exceeded when using <component> #5965

LittleSound opened this issue May 20, 2022 · 4 comments


Copy link

LittleSound commented May 20, 2022

Link to minimal reproduction

Steps to reproduce

After I upgraded my vue dependency from vue@3.2.21 to vue@3.2.34 in my project, I found that my project was not working properly. I encapsulate my own input component in a file called Input.vue, however, it seems to be conflicting with <component is="input" />, producing the error as I described in the title.

I reproduced this errored case in The SFC Playground too.

What is expected?

  1. I understand that I could avoid this by changing the name of the Input.vue file, but this naming would have worked perfectly fine in the old version.
  2. According to the documentation, it should not resolve and reference input as the Input.vue component when I don't have the Input.vue component imported in the current scope.
  3. The naming of Input.vue does not match the case of input in <component is="input" />.

What is actually happening?

Encountered Error Maximum call stack size exceeded when using <component>

System Info

No response

Any additional comments?

No response

Copy link

liulinboyi commented May 20, 2022

When find the Component, the input will get the Input Component.

The name will process with camelize and capitalize to find the Component.

camelize('input') will return input.
capitalize(camelize('input')) will return Input


You can use name like this:


Copy link

sqal commented May 20, 2022

This behaviour is intended in vue 3, check- #5236. You can fix this by giving your component different name

  export default { name: 'UiInput' }

Your example worked on older version of Vue (< 3.2.34) because the compiler did not generate the component name. Right now it adds the name "Input" because file name is Input.vue.

Copy link

jbg commented Jun 6, 2022

@sqal Are breaking changes like this to be expected in patch versions in general during Vue 3's development? We started a Vue 3 project a couple months ago, and have a Button component which worked fine until a patch version update broke it, which was unexpected for us. Does Vue follow semver or not?

(I know that the style guide forbids component names like this, and we've already moved away from it and prefix everything now. Just want to understand the policy about breaking compatibility like this.)

Copy link

This is unintended breakage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

6 participants