disable-react-ref-warning
v0.1.0
Published
Disable React 19 ref warning
Maintainers
sanitysignReadme
Disable React 19 ref warning
Currently React 19 show a warning if any of your own or library components use forwardRef.
What's especially annoying is that Next.js considers this an error (because under the hood React calls console.error instead of console.warn) and shows an error toast.
Unfortunately the library authors won't be able to fix the problem with forwardRef in React 19 without loosing support for previous versions of React, so this warning will stay with us for long.
This tiny library removes React 19 ref warning
Installation
npm
npm i disable-react-ref-warningpnpm
pnpm add disable-react-ref-warningyarn
yarn add disable-react-ref-warningUsage
SPA
import { createRoot } from "react-dom/client"
import { disableRefWarning } from "disable-react-ref-warning"
import App from "./App"
disableRefWarning()
createRoot(document.getElementById("root")!).render(<App />)Next.js
If root layout.tsx in your project doesn't have a client component that wraps children then you can do this
import { RefWarningDisabler } from "disable-react-ref-warning"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
{children}
<RefWarningDisabler />
</body>
</html>
)
}If you have a client component in root layout.tsx then you can use it similarly to SPA example
// layout.tsx
import Wrapper from "./Wrapper"
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<Wrapper>{children}</Wrapper>
</body>
</html>
)
}
// Wrapper.tsx
"use client"
import { disableRefWarning } from "disable-react-ref-warning"
disableRefWarning()
export default function Wrapper({ children }: { children: React.ReactNode }) {
return children
}