Server Error ReferenceError: self is not defined

[sohinim98]

+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

[renunctt]

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