ReferenceError: Window is not defined (next 11.1.2)

[valdeniomarinho]

Carousel:

import { NextPage } from 'next'
import React, { useState } from 'react'
import Carousel from 'react-spring-3d-carousel'
import { v4 as uuidv4 } from 'uuid'

interface Props {}

const SpringCarousel: NextPage<Props> = (props: Props) => {

  const [showNavigation, setShowNavigation] = useState(true)
  const [goToSlide, setGoToSlide] = useState(0)

  const imageSources = [
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/800/800/?random" alt="1" />
    },
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/800/800/?random" alt="2" />
    },
    {
      key: uuidv4(),
      content: <img src="https://picsum.photos/600/800/?random" alt="3" />
    }
  ]

  return (
    <Carousel
      slides={imageSources}
      showNavigation={showNavigation}
      goToSlide={goToSlide}
    />
  )
}

export default SpringCarousel

Call Stack:

ReferenceError: window is not defined
    at Object.<anonymous> (/home/user/project/node_modules/react-spring-3d-carousel/dist/bundle.js:1:263)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at Object.react-spring-3d-carousel (/home/user/project/.next/server/pages/_app.js:15790:18)
    at __webpack_require__ (/home/user/project/.next/server/webpack-runtime.js:25:43)
    at Module../src/components/Carousel/index.tsx (/home/user/project/.next/server/pages/_app.js:2268:84)

[Novol1273]

Still not solving the problem?

[chamblues]

Try to use these lines to import on your current component

import dynamic from 'next/dynamic' const Carousel = dynamic(() => import('react-spring-3d-carousel'), { ssr: false });

[OverStruck]

Try to use these lines to import on your current component

import dynamic from 'next/dynamic' const Carousel = dynamic(() => import('react-spring-3d-carousel'), { ssr: false });

This fixes the issue. Thanks

[gutiguy]

Closing this issue as a solution has been provided by @chamblues.