How to properly use react-globe.gl with Next.js (ref, ssr, props

[MatteoGauthier]

I can't use the reat-globe.gl library with Next.js.

I would like to use globeEl ref with methods provided in globeEl.current

Got error like those :

// globeEl.current.controls is not a function

// with this stack
import dynamic from "next/dynamic";

const Globe = dynamic(import("react-globe.gl"), { ssr: false });

/////

function initGlobe() {
		if (globeEl.current) {
			globeEl.current.controls().autoRotate = true;
		}
	}

///

<Globe
				ref={globeEl}
				arcsData={arcsData}
				arcStroke={1}
				globeMaterial={globeMaterial}
				width={800}
				onGlobeReady={() => initGlobe()}
				arcAltitude={0.2}
				backgroundColor="rgba(0,0,0,0)"
				arcColor={"color"}
				globeImageUrl="/images/earth-blue-marble.jpg"
				bumpImageUrl="/images/earth-topology.png"
			/>

Does somebody hass succeeded with next.js ?

[vasturiano]

@MatteoGauthier for nextjs/ssr related issues please see: https://github.com/vasturiano/react-globe.gl/issues/1 https://github.com/vasturiano/react-globe.gl/issues/15