From 835242344c1c122ebd2d3e72436111c8dd6dc891 Mon Sep 17 00:00:00 2001
From: Alberto Blanco <alberto@basenet.nl>
Date: Wed, 2 Sep 2026 15:47:14 +0200
Subject: [PATCH 1/2] Infer the wrapped component's ref type in
 withErrorBoundary
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The HOC was parameterized over `Type extends ComponentClass<unknown>`,
but no argument mentions `Type`, so it can never be inferred and always
falls back to its constraint. Every wrapper therefore came out typed
`RefAttributes<Component<unknown, any, any>>`, and passing the ref the
wrapped component actually takes stops type-checking:

  Type 'RefObject<Handle | null>' is not assignable to type
  'Ref<Component<unknown, any, any>>'

Parameterize over the component instead, so `Type` is inferred from the
argument, and read the props and ref off it with `ComponentProps` and
`ComponentRef` — which is also what the runtime already forwards.

The existing ref test passes a class component, whose instance happens
to satisfy `Component<unknown, any, any>`, which is why this went
unnoticed. The added test passes a function component that declares a
`ref` prop, the React 19 form, and fails to compile without this change.

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 lib/utils/withErrorBoundary.test.tsx | 34 +++++++++++++++++++++++++++-
 lib/utils/withErrorBoundary.ts       | 15 ++++++++----
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/lib/utils/withErrorBoundary.test.tsx b/lib/utils/withErrorBoundary.test.tsx
index 940be2f8..1cd291eb 100644
--- a/lib/utils/withErrorBoundary.test.tsx
+++ b/lib/utils/withErrorBoundary.test.tsx
@@ -1,4 +1,10 @@
-import { Component, createRef, type PropsWithChildren } from "react";
+import {
+  Component,
+  createRef,
+  useImperativeHandle,
+  type PropsWithChildren,
+  type Ref,
+} from "react";
 import { createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -78,4 +84,30 @@ describe("withErrorBoundary", () => {
     expect(ref.current).not.toBeNull();
     expect(typeof ref.current?.test).toBe("function");
   });
+
+  it("should forward refs to a function component that takes a ref prop", () => {
+    type Handle = { test: () => void };
+
+    function Inner({ foo, ref }: { foo: string; ref?: Ref<Handle> }) {
+      useImperativeHandle(ref, () => ({
+        test() {
+          // No-op
+        },
+      }));
+      return foo;
+    }
+
+    const Wrapped = withErrorBoundary(Inner, {
+      fallback: <div>Error</div>,
+    });
+
+    const ref = createRef<Handle>();
+
+    act(() => {
+      root.render(<Wrapped foo="abc" ref={ref} />);
+    });
+
+    expect(ref.current).not.toBeNull();
+    expect(typeof ref.current?.test).toBe("function");
+  });
 });
diff --git a/lib/utils/withErrorBoundary.ts b/lib/utils/withErrorBoundary.ts
index 2204860f..c9911333 100644
--- a/lib/utils/withErrorBoundary.ts
+++ b/lib/utils/withErrorBoundary.ts
@@ -1,17 +1,22 @@
 import {
   createElement,
   forwardRef,
-  type ComponentClass,
+  type ComponentProps,
+  type ComponentRef,
   type ComponentType,
 } from "react";
 import { ErrorBoundary } from "../components/ErrorBoundary";
 import type { ErrorBoundaryProps } from "../types";
 
 export function withErrorBoundary<
-  Type extends ComponentClass<unknown>,
-  Props extends object,
->(Component: ComponentType<Props>, errorBoundaryProps: ErrorBoundaryProps) {
-  const Wrapped = forwardRef<InstanceType<Type>, Props>((props, ref) =>
+  // ComponentProps and ComponentRef are themselves constrained by
+  // JSXElementConstructor<any>, so the parameter they read has to be too.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Type extends ComponentType<any>,
+>(Component: Type, errorBoundaryProps: ErrorBoundaryProps) {
+  type Props = ComponentProps<Type>;
+
+  const Wrapped = forwardRef<ComponentRef<Type>, Props>((props, ref) =>
     createElement(
       ErrorBoundary,
       errorBoundaryProps,

From 4d65390456c9cf7de76f07d14eadd1811911333b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 5 Sep 2026 08:49:36 -0400
Subject: [PATCH 2/2] Tweak tests

---
 lib/utils/withErrorBoundary.test.tsx | 66 +++++++++++++++++++++-------
 1 file changed, 49 insertions(+), 17 deletions(-)

diff --git a/lib/utils/withErrorBoundary.test.tsx b/lib/utils/withErrorBoundary.test.tsx
index 1cd291eb..a4f585e2 100644
--- a/lib/utils/withErrorBoundary.test.tsx
+++ b/lib/utils/withErrorBoundary.test.tsx
@@ -1,6 +1,7 @@
 import {
   Component,
   createRef,
+  forwardRef,
   useImperativeHandle,
   type PropsWithChildren,
   type Ref,
@@ -9,6 +10,7 @@ import { createRoot } from "react-dom/client";
 import { act } from "react-dom/test-utils";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { withErrorBoundary } from "./withErrorBoundary";
+import { assert } from "./assert";
 
 describe("withErrorBoundary", () => {
   let container: HTMLDivElement;
@@ -62,42 +64,72 @@ describe("withErrorBoundary", () => {
   it("should forward refs", () => {
     type Props = { foo: string };
 
-    class Inner extends Component<Props> {
-      test() {
-        // No-op
+    class TestClassComponent extends Component<Props> {
+      getFoo() {
+        return this.props.foo;
       }
       render() {
-        return this.props.foo;
+        return null;
       }
     }
 
-    const Wrapped = withErrorBoundary(Inner, {
+    const Wrapped = withErrorBoundary(TestClassComponent, {
       fallback: <div>Error</div>,
     });
 
-    const ref = createRef<Inner>();
+    const ref = createRef<TestClassComponent>();
 
     act(() => {
       root.render(<Wrapped foo="abc" ref={ref} />);
     });
 
-    expect(ref.current).not.toBeNull();
-    expect(typeof ref.current?.test).toBe("function");
+    assert(ref.current !== null);
+    expect(ref.current.getFoo()).toBe("abc");
   });
 
   it("should forward refs to a function component that takes a ref prop", () => {
-    type Handle = { test: () => void };
-
-    function Inner({ foo, ref }: { foo: string; ref?: Ref<Handle> }) {
+    type Handle = { getFoo: () => string };
+
+    function TestFunctionComponent({
+      foo,
+      ref,
+    }: {
+      foo: string;
+      ref?: Ref<Handle>;
+    }) {
       useImperativeHandle(ref, () => ({
-        test() {
-          // No-op
-        },
+        getFoo: () => foo,
       }));
       return foo;
     }
 
-    const Wrapped = withErrorBoundary(Inner, {
+    const Wrapped = withErrorBoundary(TestFunctionComponent, {
+      fallback: <div>Error</div>,
+    });
+
+    const ref = createRef<Handle>();
+
+    act(() => {
+      root.render(<Wrapped foo="abc" ref={ref} />);
+    });
+
+    assert(ref.current !== null);
+    expect(ref.current.getFoo()).toBe("abc");
+  });
+
+  it("should forward refs to a function using forwardRef", () => {
+    type Handle = { getFoo: () => string };
+
+    const TestForwardRefComponent = forwardRef(
+      ({ foo }: { foo: string }, ref: Ref<Handle>) => {
+        useImperativeHandle(ref, () => ({
+          getFoo: () => foo,
+        }));
+        return null;
+      },
+    );
+
+    const Wrapped = withErrorBoundary(TestForwardRefComponent, {
       fallback: <div>Error</div>,
     });
 
@@ -107,7 +139,7 @@ describe("withErrorBoundary", () => {
       root.render(<Wrapped foo="abc" ref={ref} />);
     });
 
-    expect(ref.current).not.toBeNull();
-    expect(typeof ref.current?.test).toBe("function");
+    assert(ref.current !== null);
+    expect(ref.current.getFoo()).toBe("abc");
   });
 });