Bug: forwardRef provides an empty object as ref, causing can't define property "current" error.

[hansottowirtz]

React version: 18.3.0-next-3ba7add60-20221201

Hard to reproduce.

In Next.js, in rare cases, and only after a fast refresh, the ref object when using forwardRef is simply {}.

This leads to the TypeError: can't define property "current": Object is not extensible error when used with useImperativeHandle.

function Parent() {
  const carouselRef = useRef<any>();

  return <Suspense><Carousel ref={carouselRef} /></Suspense>
}

const Carousel = forwardRef((props, ref) => {
  if (!('current' in ref)) { debugger; }
  const thing = use(aPromise);
  return ...;
});

In updateImperativeHandle, the ref is already an empty object.

I haven't investigated it further yet, the stacktraces are quite hard to follow.

[joaoromeira]

You should try this approach (I think you want to use the ref to control the carousel)

import { useEffect } from 'react';
import { forwardRef, Suspense, useImperativeHandle, useRef } from 'react'


type CarouselProps = any

type CarouselHandle = {
  init: () => void
}

const Carousel  = forwardRef<CarouselHandle, CarouselProps>((props, ref) => {
  useImperativeHandle(ref, () => ({
   init: () => {
     alert('Init!')
   } 
  }))

  return <div>Carousel</div>
});


const Parent = () => {
  const carouselRef = useRef<CarouselHandle>(null);
  
  useEffect(() => {
    if(carouselRef.current)
      carouselRef.current.init()
  }, [carouselRef])
  return (
    <Suspense fallback={<div />}>
      <Carousel ref={carouselRef} />
    </Suspense>
  )
}

export default Parent

[eps1lon]

Can you open this on the Next.js repo as well? They might have a better idea how to reduce this to a repro just using React.

[hansottowirtz]

@eps1lon I have created a failing test/reproduction in #26420, I'm waiting for some help over there.

[hansottowirtz]

Fixed by #26535