first error is importing the module no longer works when imported as such
const Globe = dynamic( () => import('react-globe.gl').then((mod) => mod.default), { ssr: false } );
quick fix here was encapsulating the component with the package react-no-ssrimport NoSSR from "react-no-ssr";
<NoSSR>
<GlobeComponent />
</NoSSR>
after the first error is solved the component on initial load
the globe is not responsive by default u can add that as a feauture
you cannot scroll past the component without zooming the component
or the component affects scroll completely
the globe is not responsive across medias
second error if you happen to reload the page
the quick fixes available wether you use
ref
forwardref
capture the undefined window in next
useEffect
all the above doesnt work
packages version am using
node latest
"next": "14.0.3",
"react": "^18",
"react-dom": "^18",
"react-globe.gl": "^2.27.1",
"react-no-ssr": "^1.1.0",
To avoid falling to the pitfalls of react you can easly focus on next on this two issues
first error is importing the module no longer works when imported as such
const Globe = dynamic( () => import('react-globe.gl').then((mod) => mod.default), { ssr: false } );
quick fix here was encapsulating the component with the packagereact-no-ssr
import NoSSR from "react-no-ssr";
after the first error is solved the component on initial load
second error if you happen to reload the page![image](https://github.com/vasturiano/react-globe.gl/assets/65861136/f8c29fbe-a20c-471b-a257-3056d247251d)
the quick fixes available wether you use
packages version am using
node latest
To avoid falling to the pitfalls of react you can easly focus on next on this two issues