fix: dynamic import error component

Signed-off-by: Innei <tukon479@gmail.com>

apps/renderer/src/components/errors/FeedFoundCanBeFollowErrorFallback.tsx

@@ -14,10 +14,7 @@ import { Button } from "../ui/button"
 import { useModalStack } from "../ui/modal"
 import { CustomSafeError, useResetErrorWhenRouteChange } from "./helper"
 
-export const FeedFoundCanBeFollowErrorFallback: FC<AppErrorFallbackProps> = ({
-  resetError,
-  error,
-}) => {
+const FeedFoundCanBeFollowErrorFallback: FC<AppErrorFallbackProps> = ({ resetError, error }) => {
   if (!(error instanceof FeedFoundCanBeFollowError)) {
     throw error
   }
@@ -90,6 +87,7 @@ export const FeedFoundCanBeFollowErrorFallback: FC<AppErrorFallbackProps> = ({
   )
 }
 
+export default FeedFoundCanBeFollowErrorFallback
 export class FeedFoundCanBeFollowError extends CustomSafeError {
   constructor(public detail: FeedModel) {
     super("Feed Found Can Be Follow")

apps/renderer/src/components/errors/FeedNotFound.tsx

@@ -6,7 +6,7 @@ import { Logo } from "../icons/logo"
 import { Button } from "../ui/button"
 import { CustomSafeError, useResetErrorWhenRouteChange } from "./helper"
 
-export const FeedNotFoundErrorFallback: FC<AppErrorFallbackProps> = ({ resetError, error }) => {
+const FeedNotFoundErrorFallback: FC<AppErrorFallbackProps> = ({ resetError, error }) => {
   if (!(error instanceof FeedNotFound)) {
     throw error
   }
@@ -40,6 +40,7 @@ export const FeedNotFoundErrorFallback: FC<AppErrorFallbackProps> = ({ resetErro
     </div>
   )
 }
+export default FeedNotFoundErrorFallback
 
 export class FeedNotFound extends CustomSafeError {
   constructor() {

apps/renderer/src/components/errors/ModalError.tsx

@@ -9,7 +9,7 @@ import { Button } from "../ui/button"
 import { useCurrentModal } from "../ui/modal"
 import { parseError } from "./helper"
 
-export const ModalErrorFallback: FC<AppErrorFallbackProps> = (props) => {
+const ModalErrorFallback: FC<AppErrorFallbackProps> = (props) => {
   const { message, stack } = parseError(props.error)
   const modal = useCurrentModal()
   return (
@@ -50,3 +50,4 @@ export const ModalErrorFallback: FC<AppErrorFallbackProps> = (props) => {
     </m.div>
   )
 }
+export default ModalErrorFallback

apps/renderer/src/components/errors/PageError.tsx

@@ -7,7 +7,7 @@ import { FeedbackIssue } from "../common/ErrorElement"
 import { Button } from "../ui/button"
 import { parseError, useResetErrorWhenRouteChange } from "./helper"
 
-export const PageErrorFallback: FC<AppErrorFallbackProps> = (props) => {
+const PageErrorFallback: FC<AppErrorFallbackProps> = (props) => {
   const { message, stack } = parseError(props.error)
   useResetErrorWhenRouteChange(props.resetError)
   return (
@@ -43,3 +43,5 @@ export const PageErrorFallback: FC<AppErrorFallbackProps> = (props) => {
     </div>
   )
 }
+
+export default PageErrorFallback

apps/renderer/src/components/errors/index.ts

@@ -1,14 +1,14 @@
+import { lazy } from "react"
+
 import { ErrorComponentType } from "./enum"
-import { FeedFoundCanBeFollowErrorFallback } from "./FeedFoundCanBeFollowErrorFallback"
-import { FeedNotFoundErrorFallback } from "./FeedNotFound"
-import { ModalErrorFallback } from "./ModalError"
-import { PageErrorFallback } from "./PageError"
 
 const ErrorFallbackMap = {
-  [ErrorComponentType.Modal]: ModalErrorFallback,
-  [ErrorComponentType.Page]: PageErrorFallback,
-  [ErrorComponentType.FeedFoundCanBeFollow]: FeedFoundCanBeFollowErrorFallback,
-  [ErrorComponentType.FeedNotFound]: FeedNotFoundErrorFallback,
+  [ErrorComponentType.Modal]: lazy(() => import("./ModalError")),
+  [ErrorComponentType.Page]: lazy(() => import("./PageError")),
+  [ErrorComponentType.FeedFoundCanBeFollow]: lazy(
+    () => import("./FeedFoundCanBeFollowErrorFallback"),
+  ),
+  [ErrorComponentType.FeedNotFound]: lazy(() => import("./FeedNotFound")),
 }
 
 export const getErrorFallback = (type: ErrorComponentType) => ErrorFallbackMap[type]