ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.
MIT License
5.24k stars 787 forks source link

svelte/sapper ReferenceError: Element is not defined #471

Open webspilka opened 4 years ago

webspilka commented 4 years ago

Issue description:
I try load tiny-slider in my svelte/sapper component https://sapper.svelte.dev and get error

webpack:///./node_modules/tiny-slider/src/helpers/childNode.remove.js?:2
if(!("remove" in Element.prototype)){
                 ^

ReferenceError: Element is not defined
    at eval (webpack:///./node_modules/tiny-slider/src/helpers/childNode.remove.js?:2:18)
    at Object../node_modules/tiny-slider/src/helpers/childNode.remove.js (/Users/bit/Development/test/sappertest/__sapper__/dev/server/server.js:228:1)
    at __webpack_require__ (/Users/bit/Development/test/sappertest/__sapper__/dev/server/server.js:21:30)
    at eval (webpack:///./node_modules/tiny-slider/src/tiny-slider.js?:5:83)
    at Module../node_modules/tiny-slider/src/tiny-slider.js (/Users/bit/Development/test/sappertest/__sapper__/dev/server/server.js:648:1)
    at __webpack_require__ (/Users/bit/Development/test/sappertest/__sapper__/dev/server/server.js:21:30)
    at eval (webpack:///./src/components/Slider.svelte?:4:85)
    at Module../src/components/Slider.svelte (/Users/bit/Development/test/sappertest/__sapper__/dev/server/server.js:684:1)
    at __webpack_require__ (/Users/bit/Development/test/sappertest/__sapper__/dev/server/server.js:21:30)
    at eval (webpack:///./src/routes/index.svelte?:4:83)
> Server crashed

Demo link/slider setting:

  import { onMount } from "svelte";
  import { tns } from "tiny-slider/src/tiny-slider";

  onMount(() => {
    var slider = tns({
      container: ".my-slider",
      items: 3,
      slideBy: "page",
      autoplay: true
    });
  });

Tiny-slider version: 2.9.2 Browser name && version: chrome last OS name && version: mac os

MikhailZakharov-dev commented 4 years ago

@webspilka , same here with nuxt. i guess that't because ur code execute on server side.

mattpilott commented 4 years ago

@webspilka did you solve this? onMount should mean it only runs client side, but i feel the import itself is causing the issue

antony commented 4 years ago

@matt3224 @webspilka I wrote this section of the manual for this exact reason:

https://sapper.svelte.dev/docs#Making_a_component_SSR_compatible

any import which immediately tries to use the DOM will fail when it runs server-side. Using a dynamic import (await import('stuff')) is the solution for this.

mattpilott commented 4 years ago

@webspilka, @antony is absolutely correct and I can confirm the above works as explained. We should have looked at the docs better, you know, with our eyes

Also this PR https://github.com/ganlanyuan/tiny-slider/pull/479 means this wouldn't be an issue, works too!