一个组件只能有一个实例级 <script> 元素

Question

我正在尝试包含 svelte material ui to my sveltekit app。我收到错误：

这是我的代码示例：

<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>

发生什么事了？我错过了什么？有 this thread on the issue on github 但我似乎找不到它有用。如果有人能准确解释这里发生的事情，我会很高兴。谢谢！

Answer 1

这是因为您的组件中有两个脚本标签。应该只有一个。

<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>

一个组件只能有一个实例级 <script> 元素

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

javascript

svelte

sveltekit