[SOLVED] How do I import a library into a SvelteKit app?

How do I import a library into a SvelteKit app?

I am trying to use the Cornerstone3D library in a SvelteKit app, but I am having trouble importing the library.

Here is a small example that reproduces my problem:

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.

Solution

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