Subscribe on changes!

component is="" prefers component over native element

avatar
May 30th 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 https://github.com/vuejs/core/issues/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

avatar
May 30th 2022

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