dialog causes error Accessing element.ref was removed in React 19

Question

I'm using primereact with nextjs but i get error Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.. so i guess the dialog component is using some ref but i don't know how to solve this issue, the dialog contains a form and the form is actually functional regardless of the error, is it safe to ignore it ?

Table.js


const Table = ()=>{
  const [userDialog, setUserDialog] = useState(false);

  const openCreateUserDialog = () => {
    setUserDialog(true);
  };

  const leftToolbarTemplate = () => {
    return (
      <div className="flex flex-wrap gap-2">
        <Button
          label={t("adminTeamPage.new.title")}
          icon="pi pi-plus ml-1"
          severity="success"
          onClick={openCreateUserDialog}
        />
      </div>
    );
  };

return(
     <CreateUser userDialog={userDialog} setUserDialog={setUserDialog} />
)

}

CreateUser.js

const CreateUser = ({ userDialog, setUserDialog })=>{

return(
    <Dialog
      visible={userDialog}
      header={t("adminTeamPage.new.title")}
      modal
      onHide={() => {
        if (!userDialog) return;
        setVisible(false);
      }}
      className="p-fluid container-md px-0"
    >
      <p> some dialog content
    </Dialog>
)
}

Schnitzler · Accepted Answer · 2025-02-03 19:14:02Z

2

You will need to update primereact to a React 19 compatible version.

npm i primereact@latest

For context: Primereact probably uses fordwardRef to wrap some internal components. Refs can now be passed as a regular prop instead. The fordwardRef function will be removed in a future release.

https://react.dev/blog/2024/12/05/react-19#ref-as-a-prop

answered Feb 3 at 19:14

Schnitzler

5155 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Дмитрий Жиденко · Accepted Answer · 2025-01-23 09:30:46Z

-1

npm install --save-dev @ant-design/v5-patch-for-react-19

answered Jan 23 at 9:30

Дмитрий Жиденко

1

2 Comments

Community Jan 23 at 23:04

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Juan Giacosa Jan 29 at 15:22

Please add more context on why You think your response provides a solution to Morgana's Problem. Many people might be facing the same issue and a simple sentence telling them to install a package isn't enough of a response to the actual issue.

Collectives™ on Stack Overflow

dialog causes error Accessing element.ref was removed in React 19

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related