Major Bugfix. Fix server component client compatibility

src/functions/server/web-pages/grab-page-bundled-react-component.tsx

@@ -1,5 +1,5 @@
 import type { GrabPageReactBundledComponentRes } from "../../../types";
-import EJSON from "../../../utils/ejson";
+import grabPageReactComponentString from "./grab-page-react-component-string";
 import grabTsxStringModule from "./grab-tsx-string-module";
 
 type Params = {
@@ -14,28 +14,16 @@ export default async function grabPageBundledReactComponent({
     server_res,
 }: Params): Promise<GrabPageReactBundledComponentRes | undefined> {
     try {
-        let tsx = ``;
+        let tsx = grabPageReactComponentString({
+            file_path,
+            root_file,
+            server_res,
+        });
 
-        const server_res_json = JSON.stringify(
-            EJSON.stringify(server_res || {}) ?? "{}",
-        );
-
-        if (root_file) {
-            tsx += `import Root from "${root_file}"\n`;
+        if (!tsx) {
+            return undefined;
         }
 
-        tsx += `import Page from "${file_path}"\n`;
-        tsx += `export default function Main() {\n\n`;
-        tsx += `const props = JSON.parse(${server_res_json})\n\n`;
-        tsx += `    return (\n`;
-        if (root_file) {
-            tsx += `        <Root suppressHydrationWarning={true} {...props}><Page {...props} /></Root>\n`;
-        } else {
-            tsx += `        <Page suppressHydrationWarning={true} {...props} />\n`;
-        }
-        tsx += `    )\n`;
-        tsx += `}\n`;
-
         const mod = await grabTsxStringModule({ tsx, file_path });
         const Main = mod.default;
         const component = <Main />;

src/functions/server/web-pages/grab-page-react-component-string.tsx

@@ -0,0 +1,43 @@
+import EJSON from "../../../utils/ejson";
+import pagePathTransform from "../../../utils/page-path-transform";
+
+type Params = {
+    file_path: string;
+    root_file?: string;
+    server_res?: any;
+};
+
+export default function grabPageReactComponentString({
+    file_path,
+    root_file,
+    server_res,
+}: Params): string | undefined {
+    try {
+        const target_path = pagePathTransform({ page_path: file_path });
+        let tsx = ``;
+
+        const server_res_json = JSON.stringify(
+            EJSON.stringify(server_res || {}) ?? "{}",
+        );
+
+        if (root_file) {
+            tsx += `import Root from "${root_file}"\n`;
+        }
+
+        tsx += `import Page from "${target_path}"\n`;
+        tsx += `export default function Main() {\n\n`;
+        tsx += `const props = JSON.parse(${server_res_json})\n\n`;
+        tsx += `    return (\n`;
+        if (root_file) {
+            tsx += `        <Root suppressHydrationWarning={true} {...props}><Page {...props} /></Root>\n`;
+        } else {
+            tsx += `        <Page suppressHydrationWarning={true} {...props} />\n`;
+        }
+        tsx += `    )\n`;
+        tsx += `}\n`;
+
+        return tsx;
+    } catch (error: any) {
+        return undefined;
+    }
+}