ganlanyuan / tiny-slider

Vanilla javascript slider for all purposes.
MIT License
5.23k stars 785 forks source link

window is not defined when SSR #631

Open romanown opened 3 years ago

romanown commented 3 years ago

Issue description:
ReferenceError: window is not defined at /var/www/dev/desktop/node_modules/tiny-slider/dist/tiny-slider.js:2:11 at Object. (/var/www/dev/desktop/node_modules/tiny-slider/dist/tiny-slider.js:3208:3) when compled Demo link/slider setting:

Tiny-slider version: 2.9.3 Browser name && version:
OS name && version:
I use server side rendering on node.js + react.js. import { tns } from 'tiny-slider';

may be need add to tiny-script if (typeof(window) !== 'undefined')

UPDATE: i find https://github.com/ganlanyuan/tiny-slider/pull/479/commits/935f8e6231fa1cf9eebfe5b61669b86dab31e5b2 but i do not find this in current code of slider

romanown commented 3 years ago

can You apply this changes? https://github.com/ganlanyuan/tiny-slider/pull/479 it helped me for server side rendering, but i can not import.

bmediax commented 2 years ago

I used https://github.com/gregberge/loadable-components to load it up and it to work for building

mlaigre commented 2 years ago

Thanks @bmediax, inspired by the lib you point out I solved my issue using a dynamic import

useEffect(() => {
    import('tiny-slider').then(({ tns }) => {
        tns(options)
    })
}, [])
ALWISHARIFF commented 1 year ago

Dear Team I am getting a page flicker when i import using useEffect hook i hope this issue will be fixed any collaborations i can help with. Thank you

tytanus97 commented 9 months ago

in angular SSR, for me what worked was:

import('tiny-slider').then((module) => {
      const { tns } = module.default;
      tns();
});