在SvelteKit中导入@cornerstonejs/core报错，寻求解决方法

问题根源 #

Cornerstone3D是专为浏览器环境设计的库，依赖浏览器全局对象self，但SvelteKit默认启用服务端渲染（SSR），在Node.js服务端环境中不存在self，因此导入库时会抛出ReferenceError。

解决方案 #

方案1：仅在客户端环境导入库（推荐）

利用Svelte的onMount钩子（仅在浏览器端执行）或SvelteKit提供的browser变量，确保库只在客户端加载：

修改src/routes/+page.svelte：

<script lang="ts">
    import { onMount } from 'svelte';
    let utilities;

    onMount(async () => {
        // 仅在客户端异步加载库
        const cornerstone = await import('@cornerstonejs/core');
        utilities = cornerstone.utilities;
        // 此处可编写依赖utilities的业务逻辑
    });
</script>

或者使用browser变量判断环境：

<script lang="ts">
    import { browser } from '$app/environment';
    let utilities;

    if (browser) {
        const { utilities: csUtilities } = await import('@cornerstonejs/core');
        utilities = csUtilities;
    }
</script>

方案2：配置Vite排除SSR处理

在svelte.config.js中修改Vite配置，告诉构建工具在服务端渲染时跳过Cornerstone3D的处理：

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: vitePreprocess(),
    kit: {
        adapter: adapter(),
        vite: {
            ssr: {
                // 将Cornerstone3D标记为客户端专属依赖
                noExternal: ['@cornerstonejs/core']
            }
        }
    }
};

export default config;

配置后仍需结合onMount或browser变量确保在客户端使用库。

无框架环境错误补充 #

你在无框架HTML中遇到的Cannot use import statement outside a module错误，是因为普通<script>标签默认采用CommonJS模块规范，需添加type="module"属性：

<script type="module" src="test.js"></script>

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