search

meigo / svelte-video-player

Basic video player component for svelte
MIT License
133 stars 21 forks source link

SSR failure #10

Closed basaran closed 3 years ago

basaran commented 3 years ago

Hello, I'm trying to use svelte video on a skeleton sveltekit project with SSR enabled. During dev, it returns the following at the first page hit:

ReferenceError: window is not defined
    at /node_modules/svelte-video-player/src/libs/screenfull.js:154:7
    at /node_modules/svelte-video-player/src/libs/screenfull.js:186:3
    at instantiateModule (/home/michael/websites/mymy/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:75119:15)
3:40:24 PM [vite] Error when evaluating SSR module /node_modules/svelte-video-player/src/FullscreenManager.svelte:
ReferenceError: window is not defined
    at /node_modules/svelte-video-player/src/libs/screenfull.js:152:7
    at /node_modules/svelte-video-player/src/libs/screenfull.js:184:3
    at instantiateModule (/home/michael/websites/mymy/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:75119:15)
3:40:24 PM [vite] Error when evaluating SSR module /node_modules/svelte-video-player/src/VideoPlayerClient.svelte:
ReferenceError: window is not defined
    at /node_modules/svelte-video-player/src/libs/screenfull.js:150:7
    at /node_modules/svelte-video-player/src/libs/screenfull.js:182:3
    at instantiateModule (/home/michael/websites/mymy/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:75119:15)
3:40:24 PM [vite] Error when evaluating SSR module /node_modules/svelte-video-player/src/VideoPlayer.svelte:
ReferenceError: window is not defined
    at /node_modules/svelte-video-player/src/libs/screenfull.js:150:7
    at /node_modules/svelte-video-player/src/libs/screenfull.js:182:3
    at instantiateModule (/home/michael/websites/mymy/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:75119:15)
3:40:24 PM [vite] Error when evaluating SSR module /node_modules/svelte-video-player/src/index.js:
ReferenceError: window is not defined
    at /node_modules/svelte-video-player/src/libs/screenfull.js:150:7
    at /node_modules/svelte-video-player/src/libs/screenfull.js:182:3
    at instantiateModule (/home/michael/websites/mymy/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:75119:15)
3:40:24 PM [vite] Error when evaluating SSR module /src/routes/index.svelte:
ReferenceError: window is not defined
    at /node_modules/svelte-video-player/src/libs/screenfull.js:150:7
    at /node_modules/svelte-video-player/src/libs/screenfull.js:182:3
    at instantiateModule (/home/michael/websites/mymy/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:75119:15)
500
window is not defined
ReferenceError: window is not defined
    at /node_modules/svelte-video-player/src/libs/screenfull.js:150:7
    at /node_modules/svelte-video-player/src/libs/screenfull.js:182:3
    at instantiateModule (/home/michael/websites/mymy/node_modules/vite/dist/node/chunks/dep-63d4bd14.js:75119:15)
<script>
    import { browser } from '$app/env';
    import VideoPlayer from 'svelte-video-player';

    const poster = 'https://www.server.com/poster.jpg';
    const source = [
        'https://www.server.com/video.webm',
        'https://www.server.com/video.mp4',
        'https://www.server.com/video.ogv'
    ];
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

{#if browser}
    <VideoPlayer {poster} {source} />
{/if}
basaran commented 3 years ago

Hello, I made some changes to sindresorhus' isfullscreen to take care of the SSR issues. I can send a PR if you like.

basaran commented 3 years ago

I went ahead and made a forked package giving link to your repository as the original. If this is any issue, please kindly let me know. Thank you again for making this nice component.

https://github.com/basaran/svelte-video-player-kit

https://www.npmjs.com/package/svelte-video-player-kit

hhaoao commented 3 years ago

@basaran How do you repair SSR problems? Since the SSR feature was added to Svelte, almost all svelte components in the DEV environment have crashed.

I followed your Commits to process the window and navigator objects, but I don't know how to proceed.

npm package: @svelte-parts/editor

basaran commented 3 years ago

It's usually the case if you are pulling in JS that does things on the window object without checking the environment. In svelte-video-player case, it was the common js export not exporting isScreenfull properly to be used with the module import system.

eric-nicular commented 2 years ago

@basaran The fork at https://www.npmjs.com/package/svelte-video-player-kit seems to work well for me in most cases. However, I am finding that it does not seem to work out-of-the-box with browsers in iOS. All other operating systems and browsers seem to work fine. Is there something that needs to be done to get this working with SSR and Sveltekit when on iOS?

basaran commented 2 years ago

I haven't done any svelte projects lately but my last compile from last year was and is still running fine on iphones. The forked package should be working without issues. What error do you see on the console?