Fix MDX compilation and SSR Redux issues

- Implement HTML character escaping for MDX compatibility
- Fix SSR-safe Redux hooks for useTypedDispatch and useTypedSelector
- Add createDescription function with HTML entity escaping
- Apply escaping to both front matter and markdown content
- Resolve 'Unexpected character = before name' MDX errors
- Ensure server-side rendering compatibility for all Redux operations

All build issues resolved and static site generation working correctly.

Author: 45huto5h

packages/docusaurus-plugin-openapi-docs/src/markdown/createDescription.ts

@@ -5,15 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import { greaterThan, codeFence } from "./utils";
+import { greaterThan, lessThan, codeFence } from "./utils";
 
 export function createDescription(description: string | undefined) {
   if (!description) {
     return "";
   }
   return `\n\n${description
-    .replace(greaterThan, "\\>")
+    .replace(lessThan, "<")
+    .replace(greaterThan, ">")
     .replace(codeFence, function (match) {
-      return match.replace(/\\>/g, ">");
+      return match.replace(/&gt;/g, ">").replace(/&lt;/g, "<");
     })}\n\n`;
 }

packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts

@@ -5,13 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import {
-  ContactObject,
-  LicenseObject,
-  // MediaTypeObject,
-  SecuritySchemeObject,
-} from "../openapi/types";
-import { ApiPageMetadata, InfoPageMetadata, TagPageMetadata } from "../types";
 import { createAuthentication } from "./createAuthentication";
 import { createContactInfo } from "./createContactInfo";
 // import { createDeprecationNotice } from "./createDeprecationNotice";
@@ -28,6 +21,13 @@ import { createTermsOfService } from "./createTermsOfService";
 // import { createVendorExtensions } from "./createVendorExtensions";
 import { createVersionBadge } from "./createVersionBadge";
 import { greaterThan, lessThan, render } from "./utils";
+import {
+  ContactObject,
+  LicenseObject,
+  // MediaTypeObject,
+  SecuritySchemeObject,
+} from "../openapi/types";
+import { ApiPageMetadata, InfoPageMetadata, TagPageMetadata } from "../types";
 
 // interface Props {
 //   title: string;
@@ -95,7 +95,7 @@ ApiPageMetadata) {
     `import TabItem from "@theme/TabItem";\n`,
     // create("Layout", {
     //   children: [
-    description ? `\n\n${description.trim()}\n\n` : "",
+    createDescription(description),
     createEndpoint(method, path),
     createParamsDetails({ parameters, type: "path" }),
     createParamsDetails({ parameters, type: "query" }),

packages/docusaurus-plugin-openapi-docs/src/markdown/utils.ts

@@ -42,8 +42,8 @@ export function render(children: Children): string {
 }
 
 // Regex to selectively URL-encode '>' and '<' chars
-export const lessThan =
-  /<(?!(=|button|\s?\/button|code|\s?\/code|details|\s?\/details|summary|\s?\/summary|hr|\s?\/hr|br|\s?\/br|span|\s?\/span|strong|\s?\/strong|small|\s?\/small|table|\s?\/table|thead|\s?\/thead|tbody|\s?\/tbody|td|\s?\/td|tr|\s?\/tr|th|\s?\/th|h1|\s?\/h1|h2|\s?\/h2|h3|\s?\/h3|h4|\s?\/h4|h5|\s?\/h5|h6|\s?\/h6|title|\s?\/title|p|\s?\/p|em|\s?\/em|b|\s?\/b|i|\s?\/i|u|\s?\/u|strike|\s?\/strike|bold|\s?\/bold|a|\s?\/a|table|\s?\/table|li|\s?\/li|ol|\s?\/ol|ul|\s?\/ul|img|\s?\/img|svg|\s?\/svg|div|\s?\/div|center|\s?\/center))/gu;
-export const greaterThan =
-  /(?<!(button|code|details|summary|hr|br|span|strong|small|table|thead|tbody|td|tr|th|h1|h2|h3|h4|h5|h6|title|p|em|b|i|u|strike|bold|a|li|ol|ul|img|svg|div|center|\/|\s|"|'))>/gu;
+// Match < that is not part of an HTML tag
+export const lessThan = /<(?![a-zA-Z\/])/g;
+// Match > that is not part of an HTML tag
+export const greaterThan = /(?<![a-zA-Z\s\/])>/g;
 export const codeFence = /`{1,3}[\s\S]*?`{1,3}/g;

packages/docusaurus-plugin-openapi-docs/src/openapi/openapi.ts

@@ -18,7 +18,11 @@ import kebabCase from "lodash/kebabCase";
 import unionBy from "lodash/unionBy";
 import uniq from "lodash/uniq";
 
+import { sampleRequestFromSchema } from "./createRequestExample";
+import { OpenApiObject, TagObject } from "./types";
+import { loadAndResolveSpec } from "./utils/loadAndResolveSpec";
 import { isURL } from "../index";
+import { createDescription } from "../markdown/createDescription";
 import {
   ApiMetadata,
   APIOptions,
@@ -27,9 +31,6 @@ import {
   SidebarOptions,
   TagPageMetadata,
 } from "../types";
-import { sampleRequestFromSchema } from "./createRequestExample";
-import { OpenApiObject, TagObject } from "./types";
-import { loadAndResolveSpec } from "./utils/loadAndResolveSpec";
 
 /**
  * Convenience function for converting raw JSON to a Postman Collection object.
@@ -110,9 +111,7 @@ function createItems(
         : "",
       frontMatter: {
         description: splitDescription
-          ? splitDescription[0]
-              .replace(/((?:^|[^\\])(?:\\{2})*)"/g, "$1'")
-              .replace(/\s+$/, "")
+          ? createDescription(splitDescription[0].replace(/\s+$/, ""))
           : "",
       },
       securitySchemes: openapiData.components?.securitySchemes,
@@ -225,9 +224,7 @@ function createItems(
           : "",
         frontMatter: {
           description: splitDescription
-            ? splitDescription[0]
-                .replace(/((?:^|[^\\])(?:\\{2})*)"/g, "$1'")
-                .replace(/\s+$/, "")
+            ? createDescription(splitDescription[0].replace(/\s+$/, ""))
             : "",
           ...(options?.proxy && { proxy: options.proxy }),
           ...(options?.hideSendButton && {
@@ -358,9 +355,7 @@ function createItems(
           : "",
         frontMatter: {
           description: splitDescription
-            ? splitDescription[0]
-                .replace(/((?:^|[^\\])(?:\\{2})*)"/g, "$1'")
-                .replace(/\s+$/, "")
+            ? createDescription(splitDescription[0].replace(/\s+$/, ""))
             : "",
           ...(options?.proxy && { proxy: options.proxy }),
           ...(options?.hideSendButton && {
@@ -420,9 +415,7 @@ function createItems(
           description: description ?? "",
           frontMatter: {
             description: splitDescription
-              ? splitDescription[0]
-                  .replace(/((?:^|[^\\])(?:\\{2})*)"/g, "$1'")
-                  .replace(/\s+$/, "")
+              ? createDescription(splitDescription[0].replace(/\s+$/, ""))
               : "",
           },
           tag: {

packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/hooks.ts

@@ -21,20 +21,28 @@ const defaultState: RootState = {
 } as RootState;
 
 export const useTypedDispatch = (): any => {
-  const dispatch = useDispatch<AppDispatch>();
+  // Create a reference that we can update
+  let dispatch: any;
 
-  if (!ExecutionEnvironment.canUseDOM) {
-    return () => {}; // Return a no-op function during SSR
+  if (ExecutionEnvironment.canUseDOM) {
+    // Only call useDispatch when we're in the browser
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    dispatch = useDispatch<AppDispatch>();
+  } else {
+    // Return a no-op function during SSR
+    dispatch = () => {};
   }
+
   return dispatch;
 };
-
 export const useTypedSelector: TypedUseSelectorHook<RootState> = (selector) => {
+  if (!ExecutionEnvironment.canUseDOM) {
+    // Return default values during SSR to prevent null store access
+    return selector(defaultState);
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
   const result = useSelector((state: RootState) => {
-    if (!ExecutionEnvironment.canUseDOM) {
-      // Return default values during SSR to prevent null store access
-      return selector(defaultState);
-    }
     return selector(state);
   });