Svelte: No mention that components must be named starting with an uppercase letter

Created on 4 Jan 2020 · 6Comments · Source: sveltejs/svelte

I'm fairly new to Svelte (and programming, in general) and while working on my first little project I ran into a pretty annoying problem in which my nested components wouldn't run/render when called in the markup. It turns out, as I found out reading #451 and #464 that components' names should start with an uppercase letter, and this was causing the issue.

I would recommend an explicit mention of this is added to the tutorial or the docs, so as to avoid (especially newbies like me) getting hung up on simple things like this.

Playing around I noticed the REPL does throw a warning about this, but for some reason I didn't see that warning in my development environment.

Source

handfulofcats

👍2

Most helpful comment

https://svelte.dev/docs#Tags says

A lowercase tag, like <div>, denotes a regular HTML element. A capitalised tag, such as <Widget> or <Namespace.Widget>, indicates a _component_.

Conduitry on 4 Jan 2020

👍2

All 6 comments

https://svelte.dev/docs#Tags says

A lowercase tag, like <div>, denotes a regular HTML element. A capitalised tag, such as <Widget> or <Namespace.Widget>, indicates a _component_.

Conduitry on 4 Jan 2020

👍2

My bad! I totally missed that part in the docs.

handfulofcats on 4 Jan 2020

Completely agree with the uppercase convention, but the compiler really needs to warn the user about this, as currently it fails silently.... which is sure to frustrate and confuse a lot of people (like myself)

Works

<script>
  import WowIcanNameThisAnything from './MyComponent.svelte';
</script>

<WowIcanNameThisAnything />

Fails silently

<script>
  import thisShouldWarnMe from './MyComponent.svelte';
</script>

<thisShouldWarnMe />

Surely the compiler can detect that a svelte component is being imported with a lowercase first character. And save silly users (like me) from making this error...

benwinding on 1 May 2020

👍1

I just found this issue from googling around about if/why svelte components had to start with a capital letter. The docs say this about tags, but I wasn't thinking about it terms of "tags", I was thinking about it in terms of "svelte components that are imported & exported, and also source file names".