ReferenceError: window is not defined when importing progressive-image.js

I want to add https://github.com/craigbuckler/progressive-image.js to my vite-ssg app and do this by adding

import 'progressive-image.js/dist/progressive-image.js'
import 'progressive-image.js/dist/progressive-image.css'

to the main.ts. On Build for server… i get ReferenceError: window is not defined. I used vitesse as base and know it’s possible to create a module. But i cannot import the two resources in a isClient if clause. Is there any way to import these resources only on client generation only?

[userquin]

The problem here is that libraries that are not SSR/SSG aware should be loaded with dynamic import, for example, for progressive-image:

 if (typeof window !== 'undefined') {
  import('progressive-image.js/dist/progressive-image.js')
 }

or using onMounted / beforeMount hooks.

You can see an example on src/modules/pwa.ts module on vitesse template, where the virtual:pwa-register module (this guy will register the service worker) is loaded only if isClient is true.

[PatrikBird]

I have the same issue when I build for production (ReferenceError: window is not defined) while playing around with p5.js sketches using vitesse. I’d like to exclude the component from SSG but wrapping the components in <client-only> doesn’t work for me.