0.1.0 • Published 7 months ago
disable-react-ref-warning v0.1.0
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-warning
pnpm
pnpm add disable-react-ref-warning
yarn
yarn add disable-react-ref-warning
Usage
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
}
0.1.0
7 months ago