Use with Sveltekit: window is not defined

Doing a standard import:

import { Viewport } from 'pixi-viewport';

and get terminal error:

window is not defined ReferenceError: window is not defined

This is before doing anything else at all.

I know Sveltekit uses Vite. I’ve looked around for potential solutions but can’t come up with anything solid.

Any ideas?

[mutewinter]

Another solution to this problem is to remove the module-scoped usage of window.innerHeight and window.innerWidth.

The use-case is in hybrid SSR apps (like Next.js) you might want to use an export from Pixi Viewport (e.g. the Viewport TypeScript interface), but never actually render anything on the server. In that case, the server will crash just from import 'pixi-viewport'.

I patched my local pixi-viewport to remove the module-scoped dependence on window.

diff --git a/src/Viewport.ts b/src/Viewport.ts
--- a/src/Viewport.ts
+++ b/src/Viewport.ts
@@ -126,8 +126,8 @@
const DEFAULT_VIEWPORT_OPTIONS: ICompleteViewportOptions = {
-    screenWidth: window.innerWidth,
-    screenHeight: window.innerHeight,
+    screenWidth: 400,
+    screenHeight: 400,
    worldWidth: null,
    worldHeight: null,
    threshold: 5,
@@ -341,8 +341,8 @@ export class Viewport extends Container
      * @param {number} [worldHeight]
      */
     resize(
-        screenWidth: number = window.innerWidth,
-        screenHeight: number = window.innerHeight,
+        screenWidth: number = 400,
+        screenHeight: number = 400,
         worldWidth?: number,
         worldHeight?: number
     ): void

In my view, this fallback to window isn’t very useful and instead screenHeight / screenWidth should be required params.

[Donny-H]

Solved with onMount(async () => { const { Viewport } = await import('pixi-viewport'); })