#When using svelte with astro, I am getting `Expected valid tag name` when using `<></>` as wrapper.

2 messages · Page 1 of 1 (latest)

nocturne furnaceBOT
#

Hi @radiant bobcat. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro does not support the use of <></> as a wrapper in Svelte components. Instead, you should use a valid HTML tag to wrap your content. Here's how you can modify your code:

<script>
</script>

<div>
    <h1>Hello Svelte</h1>
</div>

This will ensure that your Svelte component is correctly parsed and rendered. If you're using TypeScript or SCSS in your Svelte files, you might also need to create a svelte.config.js file for the Svelte IDE extension to correctly parse the Svelte files. Here's how you can do it:

import { vitePreprocess } from '@astrojs/svelte';
export default {  preprocess: vitePreprocess(),};

This config file will be automatically added for you when you run astro add svelte (source (https://docs.astro.build/en/guides/integrations-guide/svelte/#intellisense-for-typescript)).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: