A component can only have one instance-level <script> element

November 8, 2021

I’m trying to include svelte material ui to my sveltekit app. I get the error:

Here is a sample of my code:

<script context="module" lang="ts">
    export const prerender = true;
</script>

<script lang="ts">
    import Counter from '$lib/Counter.svelte';
</script>

<script lang="ts">
    import Button, { Label } from '@smui/button';
   
    let clicked = 0;
  </script>


<svelte:head>
    <title>Home</title>
</svelte:head>

<section>
    <h1>
        <div class="welcome">
            <picture>
                <source srcset="svelte-welcome.webp" type="image/webp" />
                <img src="svelte-welcome.png" alt="Welcome" />
            </picture>
        </div>

        to your new<br />Svelte 
        <Button variant="raised">
            aaaaaaa
          </Button>
    </h1>

    <h2>
        try editing <strong>src/routes/index.svelte</strong>
    </h2>

    <Counter />
</section>

What’s happening? What am I missing? There is this thread on the issue on github but I can’t seem to find it useful. I’ll be happy if someone could explain exactly what is happening here. Thanks!

>Solution :

It’s because you have two script tags in your component. It should have only one.

<script context="module" lang="ts">
    export const prerender = true;
</script>

<script lang="ts">
    import Counter from '$lib/Counter.svelte';
    import Button, { Label } from '@smui/button';
   
    let clicked = 0;
  </script>


<svelte:head>
    <title>Home</title>
</svelte:head>

<section>
    <h1>
        <div class="welcome">
            <picture>
                <source srcset="svelte-welcome.webp" type="image/webp" />
                <img src="svelte-welcome.png" alt="Welcome" />
            </picture>
        </div>

        to your new<br />Svelte 
        <Button variant="raised">
            aaaaaaa
          </Button>
    </h1>

    <h2>
        try editing <strong>src/routes/index.svelte</strong>
    </h2>

    <Counter />
</section>