[V4] Make sure that the server side rendering works again (@W-19159606@) (#2938)

* Fix server side rendering

Brought back the useInsertionEffect no-op from PR #2785.

* Bring back this comment

* Update CHANGELOG.md

Author: vmarta

packages/pwa-kit-react-sdk/CHANGELOG.md

@@ -1,4 +1,6 @@
 ## v4.0.0-extensibility-preview.5 (Jul 02, 2025)
+- SSR rendering: implement workaround for react-ssr-prepass to ignore React's useInsertionEffect [#2785](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2785)
+
 ## v4.0.0-extensibility-preview.4 (Feb 12, 2025)
 - Replace `event-emitter` in favor of the native `EventTarget` [#2289](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2289)
 - Call app extension's new methods `getRoutes` and `getRoutesAsync` [#2308](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2308)

packages/pwa-kit-react-sdk/src/ssr/server/react-rendering.js

@@ -35,6 +35,16 @@ import * as errors from '../universal/errors'
 import logger from '../../utils/logger-instance'
 import PerformanceTimer, {PERFORMANCE_MARKS} from '../../utils/performance'
 
+// Workaround for react-ssr-prepass lack of no-op for the React hook `useInsertionEffect`.
+// (see https://github.com/FormidableLabs/react-ssr-prepass/issues/84)
+// - Why useInsertionEffect? Chakra v3 hooks (like useDisclosure, useBreakpointValue, useMediaQuery, useCallbackRef) rely on it for rendering optimization.
+//   * see https://github.com/chakra-ui/chakra-ui/blob/c83e7f5acff2751ee3722bf22d89a5fe581fd72c/packages/react/src/hooks/use-callback-ref.ts#L17-L19
+// - Why no-op? useInsertionEffect is meant for client side only. So on the server, we wanted prepass to ignore it.
+// - Is it safe? Yes, we're not breaking the original behaviour. As React doc explains, the hook is for client side only: https://react.dev/reference/react/useInsertionEffect
+if (React.useInsertionEffect) {
+    React.useInsertionEffect = () => {} // no-op
+}
+
 const CWD = process.cwd()
 const BUNDLES_PATH = path.resolve(CWD, 'build/loadable-stats.json')
 

packages/pwa-kit-react-sdk/src/ssr/universal/components/with-react-query/index.js

@@ -70,8 +70,11 @@ export const withReactQuery = (Wrapped, options = {}) => {
 
             res.__performanceTimer.mark(PERFORMANCE_MARKS.reactQueryPrerender, 'start')
             // Use `ssrPrepass` to collect all uses of `useQuery`.
+            // NOTE: See a workaround in 'ssr/server/react-rendering.js' file that we had to implement,
+            // so that prepass would ignore React's useInsertionEffect hook.
             await ssrPrepass(appJSX)
             res.__performanceTimer.mark(PERFORMANCE_MARKS.reactQueryPrerender, 'end')
+
             const queryCache = queryClient.getQueryCache()
             const queries = queryCache.getAll().filter((q) => q.options.enabled !== false)
             await Promise.all(