daylilyfield/svrollbar

document is not defined

Closed this issue · 2 comments

Working with SvelteKit project which enabled SSR mode failed.

500
document is not defined
ReferenceError: document is not defined
    at Svrollbar.svelte:57:24
    at Object.$$render (PROJECT_HOME/node_modules/.pnpm/svelte@3.46.4/node_modules/svelte/internal/index.js:1745:22)
    at index.svelte:235:27
    at Object.$$render (PROJECT_HOME/node_modules/.pnpm/svelte@3.46.4/node_modules/svelte/internal/index.js:1745:22)
    at Object.default (root.svelte:43:47)
    at eval (/.svelte-kit/runtime/components/layout.svelte:8:41)
    at Object.$$render (PROJECT_HOME/node_modules/.pnpm/svelte@3.46.4/node_modules/svelte/internal/index.js:1745:22)
    at root.svelte:37:45
    at $$render (PROJECT_HOME/node_modules/.pnpm/svelte@3.46.4/node_modules/svelte/internal/index.js:1745:22)
    at Object.render (PROJECT_HOME/node_modules/.pnpm/svelte@3.46.4/node_modules/svelte/internal/index.js:1753:26)

The issue caused by no document object in SSR mode, and add a condition statement to fix it.

  // Svrollbar.svelte

  // line 56
  let windowScrollEnabled = false

  // Fixed: 'document is not defined' issue
  let ref = null
  if (ref) {
    $: windowScrollEnabled = document.scrollingElement === viewport
  }

  // line 234
  <div bind:this={ref} class="v-scrollbar" class:fixed={windowScrollEnabled} style="height: {trackHeight}px">
    <div
      bind:this={vTrack}
      class="v-track"
      style="height: {trackHeight}px"
      in:vTrackIn
      out:vTrackOut />
    <div
      bind:this={vThumb}
      class="v-thumb"
      style="height: {thumbHeight}px; top: {thumbTop}px"
      in:vThumbIn
      out:vThumbOut />
  </div>

@graywhale i am so sorry for my late response. thank you for your issue reporting. i have just released v0.10.5 that fixes the issue you pointed out.

@graywhale i close this issue. i hope you are still using this library. thank you.