Import name of child component being the same as the name of the Parent triggers an infinite recursion.
Vue version
3.4.19
Link to minimal reproduction
https://codesandbox.io/p/devbox/boring-lena-3l8wxy
Steps to reproduce
Have a Parent component with name "A" Import and render child component A
code should look like this:
<script>
import A from "./A.vue";//Child Component
....//Rest of imports
export default {
name: "A",
....//Rest of the Parent
}
What is expected?
Throw an error that the parent component should not have the same name as a child component
What is actually happening?
Infinite recursion, in cases where the components are more complex the pc freezes or the browser kills the page.
System Info
System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
Memory: 2.55 GB / 14.45 GB
Container: Yes
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
Browsers:
Brave Browser: 121.1.62.156
Chrome: 121.0.6167.139
Chromium: 121.0.6167.184
Any additional comments?
In the example there is an "i", it is an invalid variable that triggers the warning that shows that is infinitely mounted.
I had 2 components A & B, where they are used independently, a new feature required both A & B, initially I've made a copy of A and imported B, then I changed the Parent to import both A and B but the property name stayed the same as A in the Parent, so Parent.name= "A" A.name="A" B.name="B" which triggered this infinite recursion until Chrome killed the browser page.
Apparently the bug happens also if the name of the parent is the same as the import name of the child component, so if I import A from './A.vue" and Parent.name="A" even if A.name="AComponent" the bug also triggers
2
the codesandbox link is not found. it works fine in playground
Codesandbox removed the link because of the stack causing the microvm to exceed usage limits, sorry about that...
Here's a repro on play.vuejs.org