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

component is="" prefers component over native element #6029

Closed
Fuzzyma opened this issue May 30, 2022 · 2 comments
Closed

component is="" prefers component over native element #6029

Fuzzyma opened this issue May 30, 2022 · 2 comments

Comments

@Fuzzyma
Copy link

Fuzzyma commented May 30, 2022

Vue version

^3.2.34

Link to minimal reproduction

https://sfc.vuejs.org/#__DEV__eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCBCdXR0b24gZnJvbSAnLi9CdXR0b24udnVlJ1xuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPEJ1dHRvbiAvPlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AdnVlL3J1bnRpbWUtZG9tQDMuMi4zNi9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zZXJ2ZXItcmVuZGVyZXJAMy4yLjM2L2Rpc3Qvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIkJ1dHRvbi52dWUiOiI8dGVtcGxhdGU+XG4gIDxjb21wb25lbnQgOmlzPVwiJ2J1dHRvbidcIiAvPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBzZXR1cD5cbmNvbnN0IGEgPSA2XG48L3NjcmlwdD5cblxuIn0=

Steps to reproduce

Open the link and see the maximum callstack exceeded error

What is expected?

The component should correctly resolve the <component is="button"> to a native button element as it did for 3.2.33

What is actually happening?

The <component> tag tries to load the Button.vue component itself which leads to recursion.

Note that the error goes away if you have an empty script tag

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-4702MQ CPU @ 2.20GHz
    Memory: 4.46 GB / 15.88 GB
  Binaries:
    Node: 17.1.0 - D:\Programme\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.3.0 - D:\Programme\nodejs\npm.CMD
  Browsers:
    Chrome: 102.0.5005.62
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)
    Internet Explorer: 11.0.19041.1566

FF is missing (100.0.2 64bit)

Any additional comments?

I think this is some variant of #6027

I understand that the example I provided is ambiguous and vue can only guess what is meant when writing it like that.

However: If <button> works, <component :is="'button'"> should behave the exact same way. I am fine with both of them leading to recursion but only one is not consistent and also a breaking change

@Fuzzyma Fuzzyma changed the title component is="" prefers component instead of native element component is="" prefers component instead over native element May 30, 2022
@Fuzzyma Fuzzyma changed the title component is="" prefers component instead over native element component is="" prefers component over native element May 30, 2022
@sqal
Copy link
Contributor

sqal commented May 30, 2022

#5965

@Fuzzyma
Copy link
Author

Fuzzyma commented May 30, 2022

@sqal if this is intended behavior, <button> should create recursion as well. So should a non-empty script tag. But both work

@github-actions github-actions bot locked and limited conversation to collaborators Sep 25, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants