kebab-case files not supported for islands

I started a project using the project creation tool and included twind for styling. I generally use kebab-case for file names to avoid case clashing.

I have ran into an issue when running the locally (haven’t tried in deno deploy) where it’s using the name in the code. But it’s getting Unexpected token '-' as you can’t use a dash in a variable name/import reference.

Import of island in my code: import DarkModeButton from "../islands/dark-mode-button.tsx";

Import in rendered code:

Error in console Uncaught SyntaxError: Unexpected token '-' (at (index):64:12)

You can even rename the counter island that comes with the project to reproduce the issue.

[synalice]

Just don’t use a kebab-case. PascalCase is a generally accepted naming convention for .tsx/.jsx components/islands. Doing otherwise, in my opinion, should be strongly discouraged in order to preserve the convention.

[thebearingedge]

It’s true that pascal case is an extremely pervasive convention, but it also is a source of a lot of last-minute bugs because different operating systems have different case sensitivity. It’s not a good convention, but even worse, there’s literally no reason to ban the one that is less error-prone.