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

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.

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

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.

@eps1lon

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

Fix suspense replaying forward refs (#26535)

Fixed by #26535

Fix suspense replaying forward refs (#26535)

Fix suspense replaying forward refs (react#26535)

Fix suspense replaying forward refs (#26535)

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

joaoromeira commented on Mar 28, 2023

eps1lon commented on Mar 29, 2023

hansottowirtz commented on Mar 29, 2023

hansottowirtz commented on Apr 3, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

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