gutiguy/react-spring-3d-carousel

Server Error ReferenceError: self is not defined

Opened this issue · 2 comments

Server Error ReferenceError: self is not defined

+1. Having the same issue with Gatsby.

Gatsby info:

System:
OS: macOS 11.6.4
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: 5.8 - /bin/zsh
Binaries:
Node: 18.12.1 - /usr/local/bin/node
Yarn: 1.22.5 - /usr/local/bin/yarn
npm: 8.19.2 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 109.0.5414.87
Firefox: 83.0
Safari: 15.3
npmPackages:
gatsby: ^5.3.3 => 5.4.2
gatsby-image: ^3.11.0 => 3.11.0
gatsby-plugin-image: ^3.3.2 => 3.4.0
gatsby-plugin-manifest: ^5.3.1 => 5.4.0
gatsby-plugin-react-helmet: ^6.3.0 => 6.4.0
gatsby-plugin-sharp: ^5.3.2 => 5.4.0
gatsby-plugin-smoothscroll: ^1.2.0 => 1.2.0
gatsby-remark-images: ^7.3.1 => 7.4.0
gatsby-source-filesystem: ^5.3.1 => 5.4.0
gatsby-transformer-sharp: ^5.3.1 => 5.4.0
npmGlobalPackages:
gatsby-cli: 5.3.1

Need to load the component where this lib is used through hydration.

Next js hydration

page.tsx

const Test = dynamic(() => import('@/components/Test'), {ssr: false})

export default function Page() {
  return <Test />
}

Test.tsx

import Carousel from 'react-spring-3d-carousel'

const Test = () => <Carousel slides={slides} />

export default Test