[lexical-react] Fix: Fix React.startTransition on Webpack + React 17

packages/lexical-devtools/tsconfig.json

@@ -165,6 +165,7 @@
       "shared/invariant": ["../shared/src/invariant.ts"],
       "shared/normalizeClassNames": ["../shared/src/normalizeClassNames.ts"],
       "shared/react-test-utils": ["../shared/src/react-test-utils.ts"],
+      "shared/reactPatches": ["../shared/src/reactPatches.ts"],
       "shared/simpleDiffWithCursor": ["../shared/src/simpleDiffWithCursor.ts"],
       "shared/useLayoutEffect": ["../shared/src/useLayoutEffect.ts"],
       "shared/warnOnlyOnce": ["../shared/src/warnOnlyOnce.ts"]

packages/lexical-react/src/LexicalNodeMenuPlugin.tsx

@@ -18,17 +18,10 @@ import {
 } from 'lexical';
 import {useCallback, useEffect, useState} from 'react';
 import * as React from 'react';
+import {startTransition} from 'shared/reactPatches';
 
 import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu';
 
-function startTransition(callback: () => void) {
-  if (React.startTransition) {
-    React.startTransition(callback);
-  } else {
-    callback();
-  }
-}
-
 export type NodeMenuPluginProps<TOption extends MenuOption> = {
   onSelectOption: (
     option: TOption,

packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx

@@ -28,6 +28,7 @@ import {
 } from 'lexical';
 import {useCallback, useEffect, useState} from 'react';
 import * as React from 'react';
+import {startTransition} from 'shared/reactPatches';
 
 import {LexicalMenu, MenuOption, useMenuAnchorRef} from './shared/LexicalMenu';
 
@@ -105,14 +106,6 @@ function isSelectionOnEntityBoundary(
   });
 }
 
-function startTransition(callback: () => void) {
-  if (React.startTransition) {
-    React.startTransition(callback);
-  } else {
-    callback();
-  }
-}
-
 // Got from https://stackoverflow.com/a/42543908/2013580
 export function getScrollParent(
   element: HTMLElement,

packages/shared/src/reactPatches.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React from 'react';
+
+// Webpack + React 17 fails to compile on the usage of `React.startTransition` or
+// `React["startTransition"]` even if it's behind a feature detection of
+// `"startTransition" in React`. Moving this to a constant avoids the issue :/
+const START_TRANSITION = 'startTransition';
+
+export function startTransition(callback: () => void) {
+  if (START_TRANSITION in React) {
+    React[START_TRANSITION](callback);
+  } else {
+    callback();
+  }
+}

tsconfig.build.json

@@ -168,6 +168,7 @@
         "./packages/shared/src/normalizeClassNames.ts"
       ],
       "shared/react-test-utils": ["./packages/shared/src/react-test-utils.ts"],
+      "shared/reactPatches": ["./packages/shared/src/reactPatches.ts"],
       "shared/simpleDiffWithCursor": [
         "./packages/shared/src/simpleDiffWithCursor.ts"
       ],

tsconfig.json

@@ -176,6 +176,7 @@
         "./packages/shared/src/normalizeClassNames.ts"
       ],
       "shared/react-test-utils": ["./packages/shared/src/react-test-utils.ts"],
+      "shared/reactPatches": ["./packages/shared/src/reactPatches.ts"],
       "shared/simpleDiffWithCursor": [
         "./packages/shared/src/simpleDiffWithCursor.ts"
       ],