问题

我正在尝试在 SvelteKit 应用中使用 [Cornerstone3D 库](https://github.com/cornerstonejs/cornerstone3D/)，但我在导入该库时遇到了问题。

以下是重现问题的简单示例：

```bash
npm create svelte@latest my-app # 安装新的 SvelteKit 应用，使用 typescript 骨架
cd my-app
npm install
npm install @cornerstonejs/core # 安装我想要使用的库

我将此脚本添加到 src/routes/+page.svelte 顶部：

<script lang="ts">
    import { utilities } from "@cornerstonejs/core"; // 导入库的一个组件
</script>

当我使用 npm run dev 测试网站时，我收到以下错误：

ReferenceError: self is not defined
    at Object.<anonymous> (/my-app/node_modules/@cornerstonejs/core/dist/umd/index.js:2:9594)
    at Module._compile (node:internal/modules/cjs/loader:1246:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1300:10)
    at Module.load (node:internal/modules/cjs/loader:1103:32)
    at Module._load (node:internal/modules/cjs/loader:942:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25

它指向一个编译后的 JavaScript 文件。

我尝试过修改 tsconfig.json 的一些部分，比如 compilerOptions 中的 module 和 target，但它们导致了其他错误，比如：

`Object.defineproperty(exports, "__esmodule", { value: true }); exports is not defined`

我甚至尝试在 JavaScript 文件中加载库，然后将其导入到 HTML 文件中（例如 <script src="test.js"></script>），但是我得到了以下错误：

Uncaught SyntaxError: Cannot use import statement outside a module

我查看了其他 SvelteKit 项目，它们似乎以相同的方式导入库，所以我不确定我哪里出错了。

<details>
<summary>英文:</summary>

I am trying to use the [Cornerstone3D library](https://github.com/cornerstonejs/cornerstone3D/) in a SvelteKit app, but I am having trouble importing the library.

Here is a small example that reproduces my problem:

```bash
npm create svelte@latest my-app # install new SvelteKit app, skeleton, with typescript
cd my-app
npm install
npm install @cornerstonejs/core # install the library I want to work with

I add this script to the top of src/routes/+page.svelte:

<script lang="ts">
    import { utilities } from "@cornerstonejs/core"; // import a component of the library
</script>

When I test the site using npm run dev, I get the error

ReferenceError: self is not defined
    at Object.<anonymous> (/my-app/node_modules/@cornerstonejs/core/dist/umd/index.js:2:9594)
    at Module._compile (node:internal/modules/cjs/loader:1246:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1300:10)
    at Module.load (node:internal/modules/cjs/loader:1103:32)
    at Module._load (node:internal/modules/cjs/loader:942:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:168:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25

which refers to a compiled JavaScript file.

I have tried modifying parts of tsconfig.json, such as module and target in the compilerOptions, but they have resulted in other errors like:

`Object.defineproperty(exports, "__esmodule", { value: true }); exports is not defined`

I have even tried loading the library in a JavaScript file and importing it into an HTML file (ex. <script src="test.js"></script>) without a framework, but I get the error:

Uncaught SyntaxError: Cannot use import statement outside a module

I've looked at other SvelteKit projects, and they seem to import libraries the same way, so I am not sure where I am going wrong.

答案1

得分: 2

The library is not compatible with server-side rendering, you could turn it off on pages that use it.

// +page.ts
export const ssr = false

// +page.ts
export const ssr = false