Next js Errors

[DENNIS-CODES]

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-ssr import 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

[DENNIS-CODES]

let Globe = () => null
if (typeof window !== 'undefined') Globe = require('react-globe.gl').default

this solve the error in next about importing and window undefined

[rajanvalencia]

fixed it by putting "use client"; where Globe component exists