useRef not working for react-globe.gl in Next js

[arshdeepsingh2267]

useRef not working for react-globe.gl in Next js react-globe.gl is working fine with Next js when<Globe /> imported dynamically (or using Suspense and lazy() ). Only issue is that I am unable to give reference to . Only reason to provide reference is to use features like autoRotate and to set enableZoom as false. Tried it with keeping globeEl.current.controls().autoRotate = true; inside useEffect() and outside as well. Also, used setInterval() just to see if maybe later on <Globe /> is picking up the ref or not. But, no luck. Here is how I am trying to achieve it.

const globeEl = React.useRef();
  const [places, setPlaces] = React.useState(false);
const Globe = dynamic(() => import("react-globe.gl"), { ssr: false });
   useEffect(() => {
    fetchData();
    setInterval(() => {
      console.log(globeEl.current); //always showing null
      // globeEl.current.controls().enableZoom = false;
      // globeEl.current.controls().autoRotate = true;
      // globeEl.current.controls().autoRotateSpeed = 2;
    }, 2000); //also tried without setInterval(). Even outside useEffect()
  }, []);

return (
    <>
        <Stack>
          <Globe
           ref={globeEl}
            arcsData={arcsData}
            arcColor={[
              "rgb(0, 255, 225)",
              "rgb(0, 145, 255)",
              "rgb(0, 255, 225)",
            ]}
            globeImageUrl={"./earth/earth-water.png"}
            height={480}
            width={800}
            autoRotate={true}                       //  <--maybe this one is not a prop.
            arcDashGap={0.6}
            arcDashLength={0.3}
            arcDashAnimateTime={4000 + 500}
            rendererConfig={{ preserveDrawingBuffer: true }}
            backgroundColor="white"
            labelsData={places}
            labelLat={(d) => d.properties.latitude}
            labelLng={(d) => d.properties.longitude}
            labelText={(d) => d.properties.name}
            labelSize={(d) => Math.sqrt(d.properties.pop_max) * 4e-4}
            labelDotRadius={(d) => Math.sqrt(d.properties.pop_max) * 4e-4}
            labelColor={() => "rgba(0, 255, 255, 1)"}
            labelResolution={2}
          />
        </Stack>
    </>
 );
}

Error popping up as TypeError: globeEl.current.controls is not a function. Obviously that would occur as globeEl never gets to as its reference. Please let me know if there is ay other way to achieve what I want to, or is there any other issue. Thanks!

[arshdeepsingh2267]

I also tried forwardRef() thing as there is an issue when we dynamically import any component which in our case is <Globe /> but no luck. My reference : https://github.com/vercel/next.js/issues/4957#issuecomment-413841689

[vasturiano]

@arshdeepsingh2267 I think this is more a question about using next.js dynamic imports with refs than this module in particular. So, I can't give you much useful advice on that. A next.js forum would be more appropriate I think.

To me it looks odd if you're importing the module dynamically inside your component, because that will run at every rerender, but I can't say with certainty if that's the root cause or not.

[arshdeepsingh2267]

@arshdeepsingh2267 I think this is more a question about using next.js dynamic imports with refs than this module in particular. So, I can't give you much useful advice on that. A next.js forum would be more appropriate I think.

To me it looks odd if you're importing the module dynamically inside your component, because that will run at every rerender, but I can't say with certainty if that's the root cause or not.

Initially I imported <Globe/> normally. Then I started receiving "window is not defined". Then only I tried importing it dynamically.

[vasturiano]

Yes, but why to import it inside the component?

[arshdeepsingh2267]

The issue got resolved

[JacobWennebro]

@arshdeepsingh2267 How did you solve it? I am facing the same issue right now