Replace findDOMNode on React 19: the ref fix for each package

React 19 removed ReactDOM.findDOMNode, so any package that still calls it crashes with "findDOMNode is not a function". This page is the code side: a script that finds the caller in node_modules, the nodeRef fix for react-transition-group and react-draggable, a ref version of your own class components, and Credit Card Checkout V1 for when the broken package was a card number mask.

One payment$3

By buying you agree to the Terms.

One payment, no subscription
Download right after paying
Use it in client projects
Won't run on the listed stack? We fix it or refund you

Ready forCursorv0Lovableshadcn CLI

Full product pageReact · Tailwind · TypeScript

Step 1: find the package that calls findDOMNode

scripts/find-finddomnode.mjs

// node scripts/find-finddomnode.mjs
// Lists every installed package whose built files call findDOMNode.
import { readdirSync, readFileSync, statSync, existsSync } from "node:fs";
import { join } from "node:path";

const root = join(process.cwd(), "node_modules");
const hits = new Map();

function walk(dir, pkg, depth = 0) {
  if (depth > 6) return;
  for (const name of readdirSync(dir)) {
    if (name === "node_modules" || name.startsWith(".")) continue;
    const full = join(dir, name);
    const st = statSync(full);
    if (st.isDirectory()) walk(full, pkg, depth + 1);
    else if (/\.(c|m)?js$/.test(name) && st.size < 2_000_000) {
      if (readFileSync(full, "utf8").includes("findDOMNode")) {
        hits.set(pkg, (hits.get(pkg) ?? 0) + 1);
      }
    }
  }
}

for (const name of readdirSync(root)) {
  if (name.startsWith(".")) continue;
  const scoped = name.startsWith("@") ? readdirSync(join(root, name)).map((n) => `${name}/${n}`) : [name];
  for (const pkg of scoped) {
    if (pkg === "react-dom") continue; // React's own copy, not a caller
    const dir = join(root, pkg);
    if (existsSync(join(dir, "package.json"))) walk(dir, pkg);
  }
}

if (hits.size === 0) console.log("No package mentions findDOMNode.");
for (const [pkg, files] of hits) {
  const { version } = JSON.parse(readFileSync(join(root, pkg, "package.json"), "utf8"));
  console.log(`${pkg}@${version}: ${files} file(s)`);
}

Good to know

Run the script from your project folder with node scripts/find-finddomnode.mjs. It prints each installed package whose built files contain findDOMNode, with its version. React's own react-dom is skipped. A package on the list isn't always broken: react-transition-group and react-draggable only call it when you leave out nodeRef.
The stack trace usually names the package too. Look for the first frame inside node_modules under the line that says findDOMNode is not a function.
Your own code can call it as well. Search your src folder for findDOMNode and fix those calls with the class component pattern further down.
Pinning React 18 hides the crash, but Next.js 15 and newer need React 19, so on Next.js that's a dead end.
Type-checked on October 26, 2026 with TypeScript 5.9.3 against react 19.1.1, @types/react-dom 19, react-transition-group 4.4.12 types and react-draggable 4.7.2. Importing findDOMNode from react-dom fails that check, and so does giving Draggable a ref to an SVG element. We ran the scan script on a test node_modules with two fake callers; it listed both and skipped react-dom.

react-transition-group on React 19: add nodeRef

CSSTransition and Transition call findDOMNode to find the element they animate, unless you hand them a ref. In 4.4.5, the current release, the code checks props.nodeRef first and only falls back to findDOMNode without it. So the fix is a ref on the child and the same ref on the transition.
Inside a TransitionGroup each child needs its own ref, and it has to stay the same while that child animates out. The list below keeps one ref per id and forgets it in onExited.
With nodeRef set, callbacks like onEnter no longer get the node as an argument. Read nodeRef.current inside them instead.

components/fade-panel.tsx

"use client";
import { useRef, type ReactNode } from "react";
import { CSSTransition } from "react-transition-group";

// Before (crashes on React 19 when the panel mounts or unmounts):
// <CSSTransition in={open} timeout={200} classNames="fade" unmountOnExit>
//   <div className="panel">{children}</div>
// </CSSTransition>

export function FadePanel({ open, children }: { open: boolean; children: ReactNode }) {
  // With nodeRef, react-transition-group reads this ref and never calls findDOMNode.
  const nodeRef = useRef<HTMLDivElement>(null);
  return (
    <CSSTransition nodeRef={nodeRef} in={open} timeout={200} classNames="fade" unmountOnExit>
      <div ref={nodeRef} className="panel">
        {children}
      </div>
    </CSSTransition>
  );
}

components/toast-list.tsx

"use client";
import { createRef, type RefObject } from "react";
import { TransitionGroup, CSSTransition } from "react-transition-group";

type Toast = { id: string; text: string };

// In a TransitionGroup every child needs its own ref. Keep one per id,
// so a toast keeps the same ref while it animates out.
const refs = new Map<string, RefObject<HTMLLIElement | null>>();
const refFor = (id: string) => {
  if (!refs.has(id)) refs.set(id, createRef<HTMLLIElement>());
  return refs.get(id)!;
};

export function ToastList({ toasts }: { toasts: Toast[] }) {
  return (
    <TransitionGroup component="ul" className="grid gap-2">
      {toasts.map((t) => {
        const nodeRef = refFor(t.id);
        return (
          <CSSTransition key={t.id} nodeRef={nodeRef} timeout={250} classNames="toast" onExited={() => refs.delete(t.id)}>
            <li ref={nodeRef} className="rounded-lg border px-3 py-2 text-sm">
              {t.text}
            </li>
          </CSSTransition>
        );
      })}
    </TransitionGroup>
  );
}

react-draggable on React 19: the same fix

react-draggable 4.7.2 has a findDOMNode() method that returns props.nodeRef.current when you pass nodeRef, and calls React DOM's findDOMNode when you don't. Put the ref on the element Draggable wraps.
nodeRef is typed as a ref to an HTML element. If you drag an SVG, wrap it in a div and drag the div.

components/drag-card.tsx

"use client";
import { useRef } from "react";
import Draggable from "react-draggable";

// react-draggable 4.x calls findDOMNode only when nodeRef is missing.
export function DragCard() {
  const nodeRef = useRef<HTMLDivElement>(null);
  return (
    <Draggable nodeRef={nodeRef} bounds="parent" handle=".handle">
      <div ref={nodeRef} className="w-64 rounded-xl border bg-white p-4 shadow">
        <div className="handle cursor-move text-sm font-medium">Drag me</div>
        <p className="mt-2 text-sm text-neutral-600">The card moves, the text inside stays selectable.</p>
      </div>
    </Draggable>
  );
}

Your own class components: findDOMNode(this) to createRef

Old class components often called findDOMNode(this) in componentDidMount to measure themselves. Put a createRef on the outer element and read ref.current instead. The version below also adds a ResizeObserver, so it keeps up when the box changes size later.

components/measured-box.tsx

"use client";
import { Component, createRef, type ReactNode } from "react";

// Your own class component that used findDOMNode(this) to read its size.
// Before:
//   componentDidMount() {
//     const node = ReactDOM.findDOMNode(this) as HTMLElement;
//     this.setState({ width: node.offsetWidth });
//   }

type Props = { children: ReactNode };
type State = { width: number };

export class MeasuredBox extends Component<Props, State> {
  state: State = { width: 0 };
  private box = createRef<HTMLDivElement>();
  private ro?: ResizeObserver;

  componentDidMount() {
    const node = this.box.current;
    if (!node) return;
    this.setState({ width: node.offsetWidth });
    // ResizeObserver also catches later size changes, which findDOMNode never did
    this.ro = new ResizeObserver(([entry]) => this.setState({ width: Math.round(entry.contentRect.width) }));
    this.ro.observe(node);
  }

  componentWillUnmount() {
    this.ro?.disconnect();
  }

  render() {
    return (
      <div ref={this.box}>
        {this.props.children}
        <p className="text-xs text-neutral-500">{this.state.width}px wide</p>
      </div>
    );
  }
}

Where Credit Card Checkout V1 fits

react-input-mask is one of the most common callers, and it has no nodeRef escape. Its latest release, 2.0.4, calls findDOMNode, and the project is archived. When the mask was for a phone number or a date, the small mask hook on our react-input-mask page replaces it.
When the mask was for a card number, the mask was only one part of the job. Credit Card Checkout V1 is the whole card form: the number groups in fours, expiry gets its slash, the CVC stays digits, and a 3D card fills in as people type and flips for the CVC. For real payments, Stripe's card fields go into its renderCardFields slot, so the card digits never touch your code. It has no findDOMNode anywhere.
It runs on React 19 as shipped and needs framer-motion.

The mask hook and the Stripe setup

Install

Copy from the zipPut react/src/components into src/, then none for the fixes. react-transition-group 4.4 and react-draggable 4.4 or newer take nodeRef.
Or ask your AIPaste PROMPT.md into Cursor, Lovable or v0.

Props

renderCardFields: Stripe's card fields go here for real payments
onConfirm: confirm the payment with Stripe; throw to go back to idle
amount / currency: what the button and summary show
onPay: demo and tests only: the built-in inputs

How qodesign compares

qodesign vs 21st.dev21st.dev is best for: browsing a huge marketplace and copying many components a month.
qodesign vs Skiper UISkiper UI is best for: unusual interaction details for landing pages: image reveals, cursor trails, tooltips, drag-and-scroll galleries.

All comparisons, with prices read on each library's own site.

From the blog: findDOMNode Is Not a Function in React 19: Find It, Fix It

Questions

Can I add findDOMNode back to React 19?

No. React 19 removed it from react-dom, and there is no flag to bring it back. Fix or replace the package that calls it.

Does nodeRef fix react-transition-group on React 19?

Yes. With nodeRef on CSSTransition or Transition and the same ref on the child, react-transition-group 4.4.5 reads the ref and skips findDOMNode.

Does --legacy-peer-deps fix findDOMNode is not a function?

No. That flag only gets past npm's peer range check at install time. The package still calls a function React 19 doesn't have, so it crashes when it renders.

How do I find which package calls findDOMNode?

Run the script on this page from your project folder, or read the first node_modules frame in the stack trace.

Does the card form work in Next.js?

Yes, as a client component. Keep "use client" at the top of the file that renders it, as in the snippet above. App Router and Pages Router both work.

Can Cursor or v0 add it for me?

Yes. Each download has a PROMPT.md. Paste it into Cursor, Lovable, v0 or Claude Code and it fits the piece into your app.

Can I use it in client work?

Yes, in personal and client projects. You can't resell the code itself as a kit.