reactjsnext.jsdialogprimereactreact-ref

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


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>
)
}

Solution

  • 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