Skip to content

Commit dade03e

Browse files
committed
fix: add SSR guard to MethodEndpoint for React 19 compatibility
During server-side rendering with React 19 and react-redux v7.x, the Redux context is not properly propagated, causing useSelector to fail with 'Cannot read properties of null (reading store)'. This fix adds an ExecutionEnvironment check to render a static version of the component during SSR, avoiding the Redux store access entirely. The full interactive version still renders on the client side. Fixes #1130 (partial - addresses SSR build failures)
1 parent 2e26316 commit dade03e

File tree

1 file changed

+22
-0
lines changed
  • packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint

1 file changed

+22
-0
lines changed

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/MethodEndpoint/index.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
import React from "react";
99

1010
import BrowserOnly from "@docusaurus/BrowserOnly";
11+
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
1112
import { useTypedSelector } from "@theme/ApiItem/hooks";
1213

1314
function colorForMethod(method: string) {
@@ -38,6 +39,27 @@ export interface Props {
3839
}
3940

4041
function MethodEndpoint({ method, path, context }: Props) {
42+
// SSR-safe: During server-side rendering, render without Redux store access
43+
// This fixes React 19 compatibility where useSelector fails during SSR
44+
// because the Redux context is not properly propagated with react-redux v7.x
45+
if (!ExecutionEnvironment.canUseDOM) {
46+
return (
47+
<>
48+
<pre className="openapi__method-endpoint">
49+
<span className={"badge badge--" + colorForMethod(method)}>
50+
{method === "event" ? "Webhook" : method.toUpperCase()}
51+
</span>{" "}
52+
{method !== "event" && (
53+
<h2 className="openapi__method-endpoint-path">
54+
{`${path.replace(/{([a-z0-9-_]+)}/gi, ":$1")}`}
55+
</h2>
56+
)}
57+
</pre>
58+
<div className="openapi__divider" />
59+
</>
60+
);
61+
}
62+
4163
let serverValue = useTypedSelector((state: any) => state.server.value);
4264
let serverUrlWithVariables = "";
4365

0 commit comments

Comments
 (0)