fix(define-remix-app): apply navigation method when starting from an …

…error boundary (#1197)
wixplosives · Sep 25, 2024 · 6701055 · 6701055
1 parent b4a8f77
commit 6701055
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git 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
@@ -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};