From 6701055f8ec37ac7871e9fe8fe95e9ca44ed8f3e Mon Sep 17 00:00:00 2001
From: Peter Shershov <16524839+PeterShershov@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:54:17 +0300
Subject: [PATCH] fix(define-remix-app): apply navigation method when starting
 from an error boundary (#1197)

---
 .../src/manifest-to-router.tsx                | 34 +++++++++++++------
 .../define-remix-app/src/page-template.ts     |  2 +-
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/packages/define-remix-app/src/manifest-to-router.tsx b/packages/define-remix-app/src/manifest-to-router.tsx
index bc2bd308..5ead4545 100644
--- a/packages/define-remix-app/src/manifest-to-router.tsx
+++ b/packages/define-remix-app/src/manifest-to-router.tsx
@@ -290,16 +290,9 @@ function lazyCompAndLoader(
                   ErrorBoundary?: React.ComponentType;
               };
               return {
-                  default: () => {
-                      if (moduleWithComp.ErrorBoundary) {
-                          onCaughtError({ filePath, exportName: 'ErrorBoundary' });
-                          return <moduleWithComp.ErrorBoundary />;
-                      }
-                      if (!isRootFile) {
-                          throw new Error(`ErrorBoundary not found at ${filePath}`);
-                      }
-                      return <div>error boundary not found at {filePath}</div>;
-                  },
+                  default: () => (
+                      <ErrorPage filePath={filePath} moduleWithComp={moduleWithComp} onCaughtError={onCaughtError} />
+                  ),
               };
           })
         : undefined;
@@ -343,3 +336,24 @@ function useDispatcher<T>(dispatcher: Dispatcher<T>) {
     }, [dispatcher]);
     return state;
 }
+
+function ErrorPage({
+    moduleWithComp,
+    filePath,
+    onCaughtError,
+}: {
+    moduleWithComp: {
+        ErrorBoundary?: React.ComponentType;
+    };
+    onCaughtError: ErrorReporter;
+    filePath: string;
+}) {
+    navigation.setNavigateFunction(useNavigate());
+
+    if (moduleWithComp.ErrorBoundary) {
+        onCaughtError({ filePath, exportName: 'ErrorBoundary' });
+        return <moduleWithComp.ErrorBoundary />;
+    }
+
+    return <div>error boundary not found at {filePath}</div>;
+}
diff --git a/packages/define-remix-app/src/page-template.ts b/packages/define-remix-app/src/page-template.ts
index a6414719..31119fff 100644
--- a/packages/define-remix-app/src/page-template.ts
+++ b/packages/define-remix-app/src/page-template.ts
@@ -20,7 +20,7 @@ return params;
 const ${compIdentifier} = () => {
 const params = useLoaderData<typeof loader>();
 return <div>
-${[...varNames].map((name) => `<div>${clearJsxSpecialCharactersFromText(name)}: {params["${name}}"]</div>`).join('\n')}
+${[...varNames].map((name) => `<div>${clearJsxSpecialCharactersFromText(name)}: {params["${name}"]}</div>`).join('\n')}
 </div>;
 };
 export default ${compIdentifier};