ReferenceError: window is not defined

[nitronapp]

Just a simple install and implement exactly like mentioned in docs and you get that error.

Here are the steps to reproduce the error:

1. npx create-next-app
2. yarn install @splidejs/react-splide
3. create a "pages" folder and add a "index.js" file
4. add the following in the index.js:

import '@splidejs/splide/dist/css/themes/splide-default.min.css';
import { Splide, SplideSlide } from '@splidejs/react-splide';

export default function Home(props) {
    return (
        <Splide
            options={{
                rewind: true,
                width: "100%",
                height: 400,
                drag: true,
                cover: true,
                pauseOnHover: true,
                pauseOnFocus: true,
                lazyLoad: true,
                accessibility: true,
            }}
            onMoved={(splide, newIndex) => { console.log('moved', newIndex) }}
        >
            <SplideSlide>
                <img src="/image_1.jpg" alt="Image 1" />
            </SplideSlide>
            <SplideSlide>
                <img src="/image_2.jpg" alt="Image 2" />
            </SplideSlide>
        </Splide>
    )
}

[martinop]

you should use next/dynamic

example:

const SliderFeatured = dynamic(() => import('./SliderFeatured'), {
  ssr: false,
});

@mahmudhamid

[nitronapp]

@martinop thanks for your reply. Just ended up using the javascript implementation.