Subscribe on changes!

Maximum call stack size exceeded when passing global component through slot in a local component with same name

avatar
May 30th 2022

Vue version

^3.2.34

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-kr255h?file=src%2FApp.vue&terminal=dev

Steps to reproduce

  • Register a global component (eg. something.vue)
  • Create a local component with the same name as the global component
  • Create another component with a slot in it (eg. component-with-slot.vue)
  • Within the local component, add the component with a slot, and then pass the global component through the slot

What is expected?

On 3.2.33 and prior, this would render the global component just as if the component would be rendered if it wasn't passed through a slot.

What is actually happening?

The global component won't render, and the following error occurs Uncaught RangeError: Maximum call stack size exceeded

System Info

System:
  OS: macOS 12.2
  CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Memory: 21.71 MB / 16.00 GB
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
  Yarn: 1.22.17 - /usr/local/bin/yarn
  npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
Browsers:
  Chrome: 101.0.4951.64
  Safari: 15.3

Any additional comments?

This is not a duplicate of #5965. Issue #5965 specifically address the problem relating to component names conflicting with native HTML elements.