[DO NOT MERGE] ISS-616 repro

.yarn/patches/@replayio-react-devtools-inline-npm-4.28.6-9200d215d5.patch

@@ -0,0 +1,37 @@
+diff --git a/dist/backend.js b/dist/backend.js
+index 3f760fc6b271b12d6ac05bcab347c0a6eea30e28..90a6da63c6cba3a3d8f4afd87e574c1b4515a60b 100644
+--- a/dist/backend.js
++++ b/dist/backend.js
+@@ -5627,7 +5627,7 @@ const external_react_namespaceObject = require("react");
+  * 
+  */
+
+-const ReactSharedInternals = external_react_namespaceObject.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
++const ReactSharedInternals = external_react_namespaceObject.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED || (function() { var ni = external_react_namespaceObject.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE; return ni ? { ReactCurrentDispatcher: { get current() { return ni.H; }, set current(v) { ni.H = v; } }, ReactCurrentOwner: { get current() { return ni.A; }, set current(v) { ni.A = v; } }, ReactCurrentBatchConfig: { get transition() { return ni.T; }, set transition(v) { ni.T = v; } } } : {}; })();
+ /* harmony default export */ const shared_ReactSharedInternals = (ReactSharedInternals);
+ ;// CONCATENATED MODULE: ../react-reconciler/src/ReactWorkTags.js
+ /**
+@@ -14841,8 +14841,8 @@ function initBackend(hook, agent, global) {
+     let rendererInterface = hook.rendererInterfaces.get(id); // Inject any not-yet-injected renderers (if we didn't reload-and-profile)
+
+     if (rendererInterface == null) {
+-      if (typeof renderer.findFiberByHostInstance === 'function') {
+-        // react-reconciler v16+
++      if (typeof renderer.findFiberByHostInstance === 'function' || typeof renderer.getCurrentFiber === 'function') {
++        // react-reconciler v16+ (findFiberByHostInstance) or React 19+ (getCurrentFiber)
+         rendererInterface = attach(hook, id, renderer, global);
+       } else if (renderer.ComponentTree) {
+         // react-dom v15
+diff --git a/dist/frontend.js b/dist/frontend.js
+index 3cee5fd2a7483b4bf3d742e824a9a4af668c7a17..4ba7a1c940cf390e8006432758a4e077f86f69d2 100644
+--- a/dist/frontend.js
++++ b/dist/frontend.js
+@@ -23242,7 +23242,7 @@ function Button_Button({
+ const Pending = 0;
+ const Resolved = 1;
+ const Rejected = 2;
+-const ReactCurrentDispatcher = external_react_namespaceObject.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
++const ReactCurrentDispatcher = (external_react_namespaceObject.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED || {}).ReactCurrentDispatcher || { get current() { return (external_react_namespaceObject.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE || {}).H; }, set current(v) { (external_react_namespaceObject.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE || {}).H = v; } };
+
+ function readContext(Context) {
+   const dispatcher = ReactCurrentDispatcher.current;

jest.config.js

@@ -72,6 +72,9 @@ module.exports = {
     // Handle text file imports
     "^.+\\.properties$": "<rootDir>/test/jest/jest-text-transformer.js",
   },
-  transformIgnorePatterns: ["/node_modules/", "^.+\\.module\\.(css|sass|scss)$"],
+  transformIgnorePatterns: [
+    "/node_modules/(?!(suspense|array-sorting-utilities|interval-utilities|point-utilities)/)",
+    "^.+\\.module\\.(css|sass|scss)$",
+  ],
   setupFilesAfterEnv: ["<rootDir>/test/jest/setupEnv.js"],
 };

packages/accordion/index.tsx

@@ -149,9 +149,10 @@ export const Accordion: FC<{
       };
     }
 
+    const props = (c as ReactElement).props as Record<string, any>;
     return {
-      expanded: !!(c as ReactElement).props.expanded ?? false,
-      initialHeight: (c as ReactElement).props.initialHeight,
+      expanded: !!props.expanded,
+      initialHeight: props.initialHeight,
     };
   });
   const [state, dispatch] = useReducer(reducer, getInitialState(initialState!));

packages/design/PrefixBadgePicker/Picker.tsx

@@ -66,15 +66,20 @@ export function Picker<Values extends any>({
           throw Error("Picker children must be a valid React element.");
         }
 
+        // @ts-expect-error Can't enforce props type
         if (!child.props.id) {
           const name = typeof child.type === "string" ? child.type : child.type.name;
           throw Error(`Immediate Picker child "${name}" must pass an "id" prop.`);
         }
 
+        // @ts-expect-error Can't enforce props type
         const isToggle = child.props.id === "toggle";
         const showToggle = value === undefined && isToggle;
+        // @ts-expect-error Can't enforce props type
         const isChildActive = value === child.props.id || showToggle;
+        // @ts-expect-error Can't enforce props type
         const wasChildActive = previousId.current === child.props.id;
+        // @ts-expect-error Can't enforce props type
         const childVariants = child.props.variants || {};
         const onSelect = () => {
           const nextIsOpen = !isOpen;
@@ -93,8 +98,10 @@ export function Picker<Values extends any>({
             transitioning.current = true;
           }
 
+          // @ts-expect-error Can't enforce props type
           const nextActiveId = isToggle ? undefined : child.props.id;
 
+          // @ts-expect-error Can't enforce props type
           previousId.current = isChildActive ? child.props.id : undefined;
 
           onChange(nextActiveId);
@@ -116,12 +123,14 @@ export function Picker<Values extends any>({
           },
           transition: {
             ...transition,
+            // @ts-expect-error Can't enforce props type
             ...child.props.transition,
           },
           style: {
             zIndex: isChildActive || wasChildActive ? 10 : 1,
             gridColumn: isOpen ? undefined : 1,
             gridRow: 1,
+            // @ts-expect-error Can't enforce props type
             ...child.props.style,
           },
           onClick: onSelect,

packages/replay-next/components/LazyActivity.tsx

@@ -1,4 +1,4 @@
-import { unstable_Activity as Activity, ReactNode, useEffect, useRef } from "react";
+import { Activity, ReactNode, useEffect, useRef } from "react";
 
 // Wrapper around the Activity API that defers rendering the Activity tree initially,
 // until it's been explicitly marked as "visible".

packages/replay-next/components/Popup.tsx

@@ -24,7 +24,7 @@ export default function Popup({
 }: Omit<HTMLAttributes<HTMLDivElement>, "onClick"> & {
   children: ReactNode;
   clientX?: number | null;
-  containerRef?: RefObject<HTMLElement> | null;
+  containerRef?: RefObject<HTMLElement | null> | null;
   dismiss: Dismiss;
   dismissOnMouseLeave?: boolean;
   horizontalAlignment?: "left" | "center" | "right";

packages/replay-next/components/console/ConsoleInput.tsx

@@ -22,7 +22,11 @@ import EagerEvaluationResult from "./EagerEvaluationResult";
 import useTerminalHistory from "./hooks/useTerminalHistory";
 import styles from "./ConsoleInput.module.css";
 
-export default function ConsoleInput({ inputRef }: { inputRef?: RefObject<ImperativeHandle> }) {
+export default function ConsoleInput({
+  inputRef,
+}: {
+  inputRef?: RefObject<ImperativeHandle | null>;
+}) {
   const { executionPoint } = useContext(TimelineContext);
   const { enterFocusMode } = useContext(FocusContext);
 
@@ -69,7 +73,7 @@ export default function ConsoleInput({ inputRef }: { inputRef?: RefObject<Impera
   );
 }
 
-function ConsoleInputSuspends({ inputRef }: { inputRef?: RefObject<ImperativeHandle> }) {
+function ConsoleInputSuspends({ inputRef }: { inputRef?: RefObject<ImperativeHandle | null> }) {
   const [searchState] = useContext(ConsoleSearchContext);
   const { selectedPauseAndFrameId } = useContext(SelectedFrameContext);
   const replayClient = useContext(ReplayClientContext);

packages/replay-next/components/console/ConsoleRoot.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import {
-  unstable_Activity as Activity,
+  Activity,
   KeyboardEvent,
   MouseEvent,
   ReactNode,
@@ -74,10 +74,10 @@ function Console({
   searchInputRef,
   showFiltersByDefault,
 }: {
-  messageListRef: RefObject<HTMLElement>;
+  messageListRef: RefObject<HTMLElement | null>;
   filterDrawerOpenDefault?: boolean;
   nagHeader?: ReactNode;
-  searchInputRef: RefObject<HTMLInputElement>;
+  searchInputRef: RefObject<HTMLInputElement | null>;
   showFiltersByDefault?: boolean;
 }) {
   const inputRef = useRef<ImperativeHandle>(null);

packages/replay-next/components/elements/utils/serialization.ts

@@ -154,7 +154,8 @@ export function serializeDOM(rootNode: Document): number[] {
 
     const objectId = getObjectId(domNodeOrText);
 
-    let { childNodes, classList, id, nodeType, tagName, textContent } = domNodeOrText;
+    let { childNodes, classList, id, nodeType, tagName } = domNodeOrText;
+    let textContent: string | null = domNodeOrText.textContent;
 
     switch (nodeType) {
       case Node.DOCUMENT_NODE: {

packages/replay-next/components/errors/InlineErrorBoundary.tsx

@@ -87,7 +87,7 @@ function logErrorToSentry(error: Error, info: ErrorInfo, name: string) {
     componentStack = ErrorStackParser.parse({
       message: "",
       name: "",
-      stack: info.componentStack,
+      stack: info.componentStack ?? undefined,
     })
       .filter(frame => {
         // Filter DOM elements from the stack trace.

packages/replay-next/components/lexical/CodeEditor.tsx

@@ -25,6 +25,7 @@ import {
 } from "lexical";
 import {
   ForwardedRef,
+  JSX,
   createElement,
   forwardRef,
   useEffect,

packages/replay-next/components/lexical/CommentEditor.tsx

@@ -30,7 +30,7 @@ import {
   SerializedEditorState,
   TextNode,
 } from "lexical";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { JSX, useCallback, useEffect, useMemo, useRef } from "react";
 
 import LexicalEditorRefSetter from "./LexicalEditorRefSetter";
 import { AutoLinkNode } from "./plugins/auto-link/AutoLinkNode";

packages/replay-next/components/lexical/hooks/useContentEditableNoUserSelect.tsx

@@ -2,7 +2,7 @@ import assert from "assert";
 import { RefObject, useEffect } from "react";
 
 export function useContentEditableNoUserSelect(
-  rootElementRef: RefObject<HTMLElement>,
+  rootElementRef: RefObject<HTMLElement | null>,
   options: {
     autoFocus: boolean;
     disableSelectionWhenNotFocused: boolean;

packages/replay-next/components/lexical/plugins/code-completion/CodeCompletionPlugin.tsx

@@ -2,7 +2,7 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { mergeRegister } from "@lexical/utils";
 import { ExecutionPoint } from "@replayio/protocol";
 import { $createTextNode, TextNode } from "lexical";
-import { useContext, useEffect } from "react";
+import { JSX, useContext, useEffect } from "react";
 
 import { useCurrentFocusWindow } from "replay-next/src/hooks/useCurrentFocusWindow";
 import { ReplayClientContext } from "shared/client/ReplayClientContext";

packages/replay-next/components/lexical/plugins/loom-link/LoomLink.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from "react";
+import { JSX, Suspense } from "react";
 
 import { LoomLinkNode } from "./LoomLinkNode";
 import styles from "./LoomLink.module.css";

packages/replay-next/components/lexical/plugins/loom-link/LoomLinkNode.ts

@@ -1,6 +1,6 @@
 import type { EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
 import { $applyNodeReplacement, DecoratorNode } from "lexical";
-import { createElement, lazy } from "react";
+import { JSX, createElement, lazy } from "react";
 
 const LoomLink = lazy(
   // @ts-ignore

packages/replay-next/components/lexical/plugins/mentions/MentionsPlugin.tsx

@@ -1,6 +1,6 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
-import { useCallback, useEffect } from "react";
+import { JSX, useCallback, useEffect } from "react";
 
 import TypeAheadPlugin from "../typeahead/TypeAheadPlugin";
 import findMatches from "./findMatches";

packages/replay-next/components/lexical/plugins/typeahead/TypeAheadListRenderer.tsx

@@ -24,7 +24,7 @@ export default function TypeAheadListRenderer<Item>({
   itemRenderer: (item: Item, query: string) => ReactNode;
   items: Item[];
   listClassName: string;
-  popupRef: RefObject<HTMLDivElement>;
+  popupRef: RefObject<HTMLDivElement | null>;
   query: string;
   selectedItem: Item | null;
 }) {

packages/replay-next/components/lexical/plugins/typeahead/TypeAheadPlugin.tsx

@@ -11,7 +11,7 @@ import {
   LexicalNode,
   TextNode,
 } from "lexical";
-import { ReactNode, Suspense, useEffect, useRef, useState } from "react";
+import { JSX, ReactNode, Suspense, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 import { INSERT_ITEM_COMMAND } from "./commands";

packages/replay-next/components/sources/PreviewPopup.tsx

@@ -20,7 +20,7 @@ import styles from "./PreviewPopup.module.css";
 
 type Props = {
   clientX?: number | null;
-  containerRef: RefObject<HTMLElement>;
+  containerRef: RefObject<HTMLElement | null>;
   dismiss: () => void;
   expression: string;
   sourceId: SourceId;

packages/replay-next/components/sources/SourceSearch.tsx

@@ -15,8 +15,8 @@ export default function SourceSearch({
   containerRef,
   inputRef,
 }: {
-  containerRef: RefObject<HTMLElement>;
-  inputRef: RefObject<HTMLInputElement>;
+  containerRef: RefObject<HTMLElement | null>;
+  inputRef: RefObject<HTMLInputElement | null>;
 }) {
   const [searchState, searchActions] = useContext(SourceSearchContext);