Svelte应用出现未知prop 'name'警告问题排查

问题描述 #

我刚搭建了一个基础Svelte应用，仅展示简单HTML内容，却在开发者工具控制台中看到警告：

<App> was created with unknown prop 'name'

展开警告后提示在app.svelte第24行缺少name属性，但该行实际是console.log(e.detail)语句。以下是我的app.svelte代码：

<script>
  import Modal from "./modal.svelte"
  import Product from "./product.svelte"

  const products = [
    {
      id: "1",
      productTitle: "Product Title 1",
      productPrice: 111.11,
    },
    {
      id: "2",
      productTitle: "Product Title 2",
      productPrice: 222.22,
    },
  ]
  let showModal = false

  const addToCart = e => {
    console.log(e.detail)
  }

  const deleteFromCart = e => {
    console.log(e.detail)
  }
</script>

{#each products as product (product.id)}
  <Product {...product} on:add-to-cart={addToCart} on:delete={deleteFromCart} />
{/each}

<button on:click={() => (showModal = true)}>Show Modal</button>

{#if showModal}
  <Modal>
    <h1 slot="header">Hi!</h1>

    <p>This works!</p>

    <button slot="footer">Confirm</button>
  </Modal>
{/if}

警告产生的原因 #

这个警告的实际源头不是app.svelte里的代码，是Svelte编译器出现了行号映射错误，真正的问题出在项目的**入口文件（通常是src/main.js或src/main.ts）**中。

你大概率在入口文件里写了类似这样的代码：

import App from './App.svelte';

const app = new App({
  target: document.body,
  props: {
    name: 'some-value' // 这个`name`属性在App组件中未声明
  }
});

而你的app.svelte并没有通过export let name;语句来接收这个name属性，Svelte会因为组件收到未声明的prop抛出警告，只是编译器错误地把警告行号指向了app.svelte里的console.log代码。

解决方式 #

1. 打开项目入口文件，检查new App()时传入的props对象，移除其中未在app.svelte中声明的name属性；
2. 如果确实需要给App组件传递name值，在app.svelte的<script>块中添加export let name;来显式接收这个prop。

内容的提问来源于stack exchange，提问作者XxXtraCookie