when component name is Anchor, it'll break the app

[kjj6198]

Describe the bug

when doing import Anchor from './Anchor.svelte and use it, it'll break the app and showing component is undefined. After changing name to anything else it works.

To Reproduce

repl

1. open REPL
2. You'll see error message component is undefined in console
3. uncomment HappyAnchor and comment Anchor, it works now!

Expected behavior

I've tried to read documentation and tutorial to see if there is some reserved word that I can not use as component name, but I couldn't find it. So I think we should allow Anchor as component name?

Information about your Svelte project:

• In Chrome 81, it shows Cannot read property '$$' of undefined
• In Firefox 75, it shows component is undefined
• svelte version: 3.21.0

[GrygrFlzr]

Seems like it's due to variable name reuse, if we check the JS output when the component is named HappyAnchor:

const happyanchor = new HappyAnchor({ props: { href: "https://github.com" } });
// ...
m(target, anchor) {
  mount_component(happyanchor, target, anchor);
  current = true;
}

vs. when it's named Anchor:

const anchor = new Anchor({ props: { href: "https://github.com" } });
// ...
m(target, anchor) {
  mount_component(anchor, target, anchor);
  current = true;
}

---

There's already a workaround for this when the component is instead named Target:

const target = new Target({ props: { href: "https://github.com" } });
// ...
m(target$1, anchor) {
  mount_component(target, target$1, anchor);
  current = true;
}

So it seems like the compiler should be able to take the same approach.

[Conduitry]

This has been fixed in 3.22.0 - https://svelte.dev/repl/164f2abd2ca044b1b21652f3083589a0?version=3.22.0