0.1.0 • Published 7 months ago

disable-react-ref-warning v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

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
}