Uncaught Error: 'target' is a required option - Svelte

Question

我正在为 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 尝试了未编译的组件，但是导入不起作用。

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

Answer 1

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 组件的导入。

Answer 2

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

Answer 3

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

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

而且必须

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

注意缺少的defer。

Uncaught Error: 'target' is a required option - Svelte

Uncaught Error: 'target' is a required option - Svelte

npm

svelte

rollupjs