ForwardRef in dynamic import

[beachstrider]

In nextjs, I imported it using dynamic import. Now the ref doesn't work as I am trying to access an original threejs object. Tried react forwardref, but no success, here is my implementation:

'use client'

import { forwardRef, useEffect, useRef } from 'react'

import dynamic from 'next/dynamic'

import placesData from './placesData.json'

const _Globe = dynamic(() => import('react-globe.gl').then((mod) => mod.default), {
  ssr: false
})

const Globe = forwardRef((props: {}, ref: any) => <_Globe {...props} ref={ref} />)

export const CitiesGlobe = () => {
  const globeEl = useRef<any>(null)
  const places: any = placesData

  useEffect(() => {
    if (globeEl.current) {
      globeEl.current.pointOfView({ lat: 20, lng: -16.6, altitude: 1.7 }, 4000)
      globeEl.current.controls().autoRotate = true
      globeEl.current.controls().enabled = false
    }
  }, [])

  return (
    <Globe
      ref={globeEl}
      width={520}
      height={520}
      globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
      backgroundColor="rgba(0,0,0,0)"
      labelsData={places}
      labelColor={() => 'rgba(255, 165, 0, 0.75)'}
      labelLat={(d: any) => d.properties.latitude}
      labelLng={(d: any) => d.properties.longitude}
      labelText={(d: any) => d.properties.name}
      labelSize={(d: any) => Math.sqrt(d.properties.pop_max) * 4e-4}
      labelDotRadius={(d: any) => Math.sqrt(d.properties.pop_max) * 4e-4}
      labelResolution={2}
      objectRotation={{ x: 50, y: 50, z: 1 }}
    />
  )
}

[vasturiano]

@jasonmz thanks for reaching out. This is more relevant to the react-globe.gl repo, or perhaps even nextjs itself. In any case, here's an example from that repo that uses a ref. Does that not work for you? https://github.com/vasturiano/react-globe.gl https://github.com/vasturiano/react-globe.gl/blob/master/example/world-population/index.html

[vasturiano]

Duplicate of https://github.com/vasturiano/react-globe.gl/issues/147