Trying to render Arcs with NextJS

[rasmusfredrik]

Describe the bug Using next/dynamic import to import react-globe.gl

To Reproduce Load Arcs with following useEffect code: const [arcsData, setArcsData] = useState([]) //const [generatedData, setGeneratedData] = useState([]);

useEffect(()=>{ const N = 20 const gData = [...Array(N).keys()].map(() => ({ startLat: (Math.random() - 0.5) 180, startLng: (Math.random() - 0.5) 360, endLat: (Math.random() - 0.5) 180, endLng: (Math.random() - 0.5) 360, color: [['red', 'white', 'blue', 'green'][Math.round(Math.random() 3)], ['red', 'white', 'blue', 'green'][Math.round(Math.random() 3)]] }))

  //setGeneratedData(gData);
  setArcsData(gData)

},[])

Expected behavior Like to see the arcs animating on the globe

Screenshots

Desktop (please complete the following information):

• OS: Mac OS Catalina
• Browser: Firefow 99.01, Brave 1.38

Additional context Would be good to find out how to debug issues like this as well

[vasturiano]

@comicsaint can you make a reproducible example on https://codesandbox.io/ that shows your issue?

[rasmusfredrik]

Let see if this works. I couldn't get that dynamic import to run properly in the sandbox

It looks like it is working on the sandbox but not in dev env https://codesandbox.io/s/black-currying-hhlelt

[vasturiano]

@comicsaint glad to hear. It's probably something related to your app setup then. Closing the issue for now.