未捕获的错误：“目标”是必需选项 - Svelte答案

【问题标题】：Uncaught Error: 'target' is a required option - Svelte未捕获的错误：“目标”是必需选项 - Svelte
【发布时间】：2021-02-27 01:00:42
【问题描述】：

我正在为 Svelte 构建一个 NPM 包。通过这个包，我导出了几个简单的组件：

import SLink from './SLink.svelte';
import SView from './SView.svelte';

export { SLink, SView };

这是在使用汇总将它们捆绑到缩小版本之前。

汇总配置：

module.exports = {
    input: 'src/router/index.ts',
    output: {
        file: pkg.main,
        format: 'umd',
        name: 'Router',
        sourcemap: true,
    },
    plugins: [
        svelte({
            format: 'umd',
            preprocess: sveltePreprocess(),
        }),
        resolve(),
        typescript(),
        terser(),
    ],
};

package.json（减去不必要的信息）：

{
    "name": "svelte-dk-router",
    "version": "0.1.29",
    "main": "dist/router.umd.min.js",
    "scripts": {
        "lib": "rollup -c lib.config.js",
    },
    "peerDependencies": {
        "svelte": "^3.0.0"
    },
    "files": [
        "dist/router.umd.min.js"
    ],
}

当我发布包并测试它时，我得到了这个错误：

Uncaught Error: 'target' is a required option
    at new SvelteComponentDev (index.mjs:1642)
    at new Home (App.svelte:5)
    at Z (router.umd.min.js:1)
    at N (router.umd.min.js:1)
    at new t.SView (router.umd.min.js:1)
    at create_fragment (App.svelte:5)
    at init (index.mjs:1476)
    at new App (App.svelte:5)
    at main.js:7
    at main.js:9

这似乎与安装组件有关，因为target 用于安装：

const app = new App({ target: document.body })

奇怪的是，SLink 自己工作正常，可以正常安装等等，只是 SView 不起作用。

SLink:

<script lang="ts">
    import { writableRoute, changeRoute } from '../logic';

    export let name: string = undefined,
        path: string = undefined,
        query: Record<string, string> = undefined,
        params: Record<string, string> = undefined;

    let routerActive: boolean;

    writableRoute.subscribe(newRoute => {
        if (newRoute.path === '*') return;
        const matches = (path && path.match(newRoute.regex)) || newRoute.name === name;
        routerActive = matches ? true : false;
    });
</script>

<div
    on:click={() => changeRoute({ name, path, query, params })}
    class={routerActive ? 'router-active' : ''}>
    <slot />
</div>

SView:

<script lang="ts">
    import { writableRoute } from '../logic';

    let component: any;

    writableRoute.subscribe(newRoute => (component = newRoute ? newRoute.component : null));
</script>

<svelte:component this={component} />

我已经按照these docs 尝试了未编译的组件，但是导入不起作用。

有人知道我该如何解决这个问题吗？

【问题讨论】：

标签： npm svelte rollupjs

【解决方案1】：

我最近遇到了这个问题。我正在设置一个新页面并忘记了script 上的defer 关键字。我有：

<script src="/app/public/build/bundle.js"></script>

它必须是

<script defer src="/app/public/build/bundle.js"></script>

请注意缺少的defer。

【讨论】：

【解决方案2】：

Svelte 树中的所有组件都需要使用相同的 Svelte 编译器（即相同的 node_modules/svelte）一次全部编译。这包括来自外部库的组件，例如您要实现的目标。这就是您链接的文档中所解释的内容。

package.json 的 main 字段将公开已编译的组件，以便在非 Svelte 应用程序中使用。

您还需要一个 svelte 字段来公开组件的未编译版本，以供 Svelte 应用程序使用。您仍然可以从 .js 文件中导出多个 Svelte 组件。

package.json

{
    "name": "svelte-dk-router",
    "version": "0.1.29",
    "main": "dist/router.umd.min.js",

    "svelte": "src/index.js",

    "scripts": {
        "lib": "rollup -c lib.config.js",
    },
    "peerDependencies": {
        "svelte": "^3.0.0"
    },
    "files": [
        "dist/router.umd.min.js"
    ],
}

src/index.js

import SLink from './SLink.svelte';
import SView from './SView.svelte';

export { SLink, SView };

rollup-plugin-svelte 将在您的库的package.json 中获取svelte 字段，以便正确解析 Svelte 组件的导入。

【讨论】：

这似乎在正确的轨道上，但是导入不起作用，因为 ../logic 被编译为 umd
你应该从未编译的源文件中导入，所以它和其他的放在正确的包中。 import { ... } from './logic.js' 或类似的东西，带有 src/logic.js 文件。
我决定将所有 Typescript 文件编译到一个 dist 文件夹中，并使用一个脚本来复制组件，将 main 和 svelte 指向一个 index.js，它会导出所有内容，这很有效.谢谢！

【解决方案3】：

我不知道您的问题，但由于这个原因，我收到了相同的错误消息：在位于src 文件夹中的template.html 文件中，我删除了具有#sapper ID 的元素并替换了body 标记内的%sapper.html% 代码。接下来要做的是将渲染目标更改为document.body，在位于src 文件夹中的client.js 文件中。我忘了执行此步骤，这导致了该错误消息。

【讨论】：