From 7a531df47d7064fcb5351ad212524e971d984d6c Mon Sep 17 00:00:00 2001 From: Ben Newman Date: Tue, 10 May 2022 18:07:53 -0400 Subject: [PATCH] Obfuscate React.useSyncExternalStore to prevent webpack complaint. https://github.com/apollographql/apollo-client/pull/9675#issuecomment-1122033281 --- src/react/hooks/useSyncExternalStore.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/react/hooks/useSyncExternalStore.ts b/src/react/hooks/useSyncExternalStore.ts index 7f72f7d91c6..6b6677567ac 100644 --- a/src/react/hooks/useSyncExternalStore.ts +++ b/src/react/hooks/useSyncExternalStore.ts @@ -12,6 +12,13 @@ type RealUseSESHookType = // when only React 17 or earlier is installed. typeof import("use-sync-external-store").useSyncExternalStore; +// Prevent webpack from complaining about our feature detection of the +// useSyncExternalStore property of the React namespace, which is expected not +// to exist when using React 17 and earlier, and that's fine. +const obfuscatedReactNamespace: typeof React & { + useSyncExternalStore?: RealUseSESHookType; +} = React; + // Adapted from https://www.npmjs.com/package/use-sync-external-store, with // Apollo Client deviations called out by "// DEVIATION ..." comments. @@ -21,9 +28,7 @@ export const useSyncExternalStore: RealUseSESHookType = ( getServerSnapshot, ) => { // When/if React.useSyncExternalStore is defined, delegate fully to it. - const realHook = (React as { - useSyncExternalStore?: RealUseSESHookType; - }).useSyncExternalStore; + const realHook = obfuscatedReactNamespace.useSyncExternalStore; if (realHook) { return realHook(subscribe, getSnapshot, getServerSnapshot); }