Skip to content

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

Closed
@kfras

Description

@kfras

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions