diff --git a/packages/console/src/assets/docs/guides/index.tsx b/packages/console/src/assets/docs/guides/index.tsx
index 7db1d1537..87d4b0f42 100644
--- a/packages/console/src/assets/docs/guides/index.tsx
+++ b/packages/console/src/assets/docs/guides/index.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable max-lines */
 // This is a generated file, don't update manually.
-
-import { lazy } from 'react';
+import { safeLazy } from 'react-safe-lazy';
 
 import apiExpress from './api-express/index';
 import apiPython from './api-python/index';
@@ -45,289 +44,289 @@ export const guides: Readonly<Guide[]> = Object.freeze([
   {
     order: 1,
     id: 'web-next-app-router',
-    Logo: lazy(async () => import('./web-next-app-router/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./web-next-app-router/logo-dark.svg?react')),
-    Component: lazy(async () => import('./web-next-app-router/README.mdx')),
+    Logo: safeLazy(async () => import('./web-next-app-router/logo.svg?react')),
+    DarkLogo: safeLazy(async () => import('./web-next-app-router/logo-dark.svg?react')),
+    Component: safeLazy(async () => import('./web-next-app-router/README.mdx')),
     metadata: webNextAppRouter,
   },
   {
     order: 1.1,
     id: 'native-expo',
-    Logo: lazy(async () => import('./native-expo/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./native-expo/logo-dark.svg?react')),
-    Component: lazy(async () => import('./native-expo/README.mdx')),
+    Logo: safeLazy(async () => import('./native-expo/logo.svg?react')),
+    DarkLogo: safeLazy(async () => import('./native-expo/logo-dark.svg?react')),
+    Component: safeLazy(async () => import('./native-expo/README.mdx')),
     metadata: nativeExpo,
   },
   {
     order: 1.1,
     id: 'spa-angular',
-    Logo: lazy(async () => import('./spa-angular/logo.svg?react')),
+    Logo: safeLazy(async () => import('./spa-angular/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./spa-angular/README.mdx')),
+    Component: safeLazy(async () => import('./spa-angular/README.mdx')),
     metadata: spaAngular,
   },
   {
     order: 1.1,
     id: 'spa-chrome-extension',
-    Logo: lazy(async () => import('./spa-chrome-extension/logo.svg?react')),
+    Logo: safeLazy(async () => import('./spa-chrome-extension/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./spa-chrome-extension/README.mdx')),
+    Component: safeLazy(async () => import('./spa-chrome-extension/README.mdx')),
     metadata: spaChromeExtension,
   },
   {
     order: 1.1,
     id: 'spa-react',
-    Logo: lazy(async () => import('./spa-react/logo.svg?react')),
+    Logo: safeLazy(async () => import('./spa-react/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./spa-react/README.mdx')),
+    Component: safeLazy(async () => import('./spa-react/README.mdx')),
     metadata: spaReact,
   },
   {
     order: 1.2,
     id: 'web-express',
-    Logo: lazy(async () => import('./web-express/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./web-express/logo-dark.svg?react')),
-    Component: lazy(async () => import('./web-express/README.mdx')),
+    Logo: safeLazy(async () => import('./web-express/logo.svg?react')),
+    DarkLogo: safeLazy(async () => import('./web-express/logo-dark.svg?react')),
+    Component: safeLazy(async () => import('./web-express/README.mdx')),
     metadata: webExpress,
   },
   {
     order: 1.2,
     id: 'web-next',
-    Logo: lazy(async () => import('./web-next/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./web-next/logo-dark.svg?react')),
-    Component: lazy(async () => import('./web-next/README.mdx')),
+    Logo: safeLazy(async () => import('./web-next/logo.svg?react')),
+    DarkLogo: safeLazy(async () => import('./web-next/logo-dark.svg?react')),
+    Component: safeLazy(async () => import('./web-next/README.mdx')),
     metadata: webNext,
   },
   {
     order: 1.2,
     id: 'web-sveltekit',
-    Logo: lazy(async () => import('./web-sveltekit/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-sveltekit/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-sveltekit/README.mdx')),
+    Component: safeLazy(async () => import('./web-sveltekit/README.mdx')),
     metadata: webSveltekit,
   },
   {
     order: 1.3,
     id: 'spa-vue',
-    Logo: lazy(async () => import('./spa-vue/logo.svg?react')),
+    Logo: safeLazy(async () => import('./spa-vue/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./spa-vue/README.mdx')),
+    Component: safeLazy(async () => import('./spa-vue/README.mdx')),
     metadata: spaVue,
   },
   {
     order: 1.3,
     id: 'web-go',
-    Logo: lazy(async () => import('./web-go/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-go/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-go/README.mdx')),
+    Component: safeLazy(async () => import('./web-go/README.mdx')),
     metadata: webGo,
   },
   {
     order: 1.3,
     id: 'web-next-auth',
-    Logo: lazy(async () => import('./web-next-auth/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-next-auth/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-next-auth/README.mdx')),
+    Component: safeLazy(async () => import('./web-next-auth/README.mdx')),
     metadata: webNextAuth,
   },
   {
     order: 1.4,
     id: 'protected-app',
-    Logo: lazy(async () => import('./protected-app/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./protected-app/logo-dark.svg?react')),
-    Component: lazy(async () => import('./protected-app/README.mdx')),
+    Logo: safeLazy(async () => import('./protected-app/logo.svg?react')),
+    DarkLogo: safeLazy(async () => import('./protected-app/logo-dark.svg?react')),
+    Component: safeLazy(async () => import('./protected-app/README.mdx')),
     metadata: protectedApp,
   },
   {
     order: 1.5,
     id: 'm2m-general',
-    Logo: lazy(async () => import('./m2m-general/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./m2m-general/logo-dark.svg?react')),
-    Component: lazy(async () => import('./m2m-general/README.mdx')),
+    Logo: safeLazy(async () => import('./m2m-general/logo.svg?react')),
+    DarkLogo: safeLazy(async () => import('./m2m-general/logo-dark.svg?react')),
+    Component: safeLazy(async () => import('./m2m-general/README.mdx')),
     metadata: m2mGeneral,
   },
   {
     order: 1.6,
     id: 'web-java-spring-boot',
-    Logo: lazy(async () => import('./web-java-spring-boot/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-java-spring-boot/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-java-spring-boot/README.mdx')),
+    Component: safeLazy(async () => import('./web-java-spring-boot/README.mdx')),
     metadata: webJavaSpringBoot,
   },
   {
     order: 1.7,
     id: 'native-ios-swift',
-    Logo: lazy(async () => import('./native-ios-swift/logo.svg?react')),
+    Logo: safeLazy(async () => import('./native-ios-swift/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./native-ios-swift/README.mdx')),
+    Component: safeLazy(async () => import('./native-ios-swift/README.mdx')),
     metadata: nativeIosSwift,
   },
   {
     order: 2,
     id: 'native-android',
-    Logo: lazy(async () => import('./native-android/logo.svg?react')),
+    Logo: safeLazy(async () => import('./native-android/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./native-android/README.mdx')),
+    Component: safeLazy(async () => import('./native-android/README.mdx')),
     metadata: nativeAndroid,
   },
   {
     order: 2,
     id: 'spa-vanilla',
-    Logo: lazy(async () => import('./spa-vanilla/logo.svg?react')),
+    Logo: safeLazy(async () => import('./spa-vanilla/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./spa-vanilla/README.mdx')),
+    Component: safeLazy(async () => import('./spa-vanilla/README.mdx')),
     metadata: spaVanilla,
   },
   {
     order: 2,
     id: 'web-nuxt',
-    Logo: lazy(async () => import('./web-nuxt/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-nuxt/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-nuxt/README.mdx')),
+    Component: safeLazy(async () => import('./web-nuxt/README.mdx')),
     metadata: webNuxt,
   },
   {
     order: 2,
     id: 'web-php',
-    Logo: lazy(async () => import('./web-php/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-php/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-php/README.mdx')),
+    Component: safeLazy(async () => import('./web-php/README.mdx')),
     metadata: webPhp,
   },
   {
     order: 2,
     id: 'web-ruby',
-    Logo: lazy(async () => import('./web-ruby/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-ruby/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-ruby/README.mdx')),
+    Component: safeLazy(async () => import('./web-ruby/README.mdx')),
     metadata: webRuby,
   },
   {
     order: 2.1,
     id: 'spa-webflow',
-    Logo: lazy(async () => import('./spa-webflow/logo.svg?react')),
+    Logo: safeLazy(async () => import('./spa-webflow/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./spa-webflow/README.mdx')),
+    Component: safeLazy(async () => import('./spa-webflow/README.mdx')),
     metadata: spaWebflow,
   },
   {
     order: 2.2,
     id: 'web-wordpress',
-    Logo: lazy(async () => import('./web-wordpress/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-wordpress/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-wordpress/README.mdx')),
+    Component: safeLazy(async () => import('./web-wordpress/README.mdx')),
     metadata: webWordpress,
   },
   {
     order: 3,
     id: 'web-python',
-    Logo: lazy(async () => import('./web-python/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-python/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-python/README.mdx')),
+    Component: safeLazy(async () => import('./web-python/README.mdx')),
     metadata: webPython,
   },
   {
     order: 4,
     id: 'native-capacitor',
-    Logo: lazy(async () => import('./native-capacitor/logo.svg?react')),
+    Logo: safeLazy(async () => import('./native-capacitor/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./native-capacitor/README.mdx')),
+    Component: safeLazy(async () => import('./native-capacitor/README.mdx')),
     metadata: nativeCapacitor,
   },
   {
     order: 5,
     id: 'native-flutter',
-    Logo: lazy(async () => import('./native-flutter/logo.svg?react')),
+    Logo: safeLazy(async () => import('./native-flutter/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./native-flutter/README.mdx')),
+    Component: safeLazy(async () => import('./native-flutter/README.mdx')),
     metadata: nativeFlutter,
   },
   {
     order: 5,
     id: 'web-dotnet-core',
-    Logo: lazy(async () => import('./web-dotnet-core/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-dotnet-core/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-dotnet-core/README.mdx')),
+    Component: safeLazy(async () => import('./web-dotnet-core/README.mdx')),
     metadata: webDotnetCore,
   },
   {
     order: 5.1,
     id: 'web-dotnet-core-mvc',
-    Logo: lazy(async () => import('./web-dotnet-core-mvc/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-dotnet-core-mvc/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-dotnet-core-mvc/README.mdx')),
+    Component: safeLazy(async () => import('./web-dotnet-core-mvc/README.mdx')),
     metadata: webDotnetCoreMvc,
   },
   {
     order: 5.2,
     id: 'web-dotnet-core-blazor-server',
-    Logo: lazy(async () => import('./web-dotnet-core-blazor-server/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-dotnet-core-blazor-server/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-dotnet-core-blazor-server/README.mdx')),
+    Component: safeLazy(async () => import('./web-dotnet-core-blazor-server/README.mdx')),
     metadata: webDotnetCoreBlazorServer,
   },
   {
     order: 5.3,
     id: 'web-dotnet-core-blazor-wasm',
-    Logo: lazy(async () => import('./web-dotnet-core-blazor-wasm/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-dotnet-core-blazor-wasm/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-dotnet-core-blazor-wasm/README.mdx')),
+    Component: safeLazy(async () => import('./web-dotnet-core-blazor-wasm/README.mdx')),
     metadata: webDotnetCoreBlazorWasm,
   },
   {
     order: 6,
     id: 'web-outline',
-    Logo: lazy(async () => import('./web-outline/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./web-outline/logo-dark.svg?react')),
-    Component: lazy(async () => import('./web-outline/README.mdx')),
+    Logo: safeLazy(async () => import('./web-outline/logo.svg?react')),
+    DarkLogo: safeLazy(async () => import('./web-outline/logo-dark.svg?react')),
+    Component: safeLazy(async () => import('./web-outline/README.mdx')),
     metadata: webOutline,
   },
   {
     order: 6.1,
     id: 'web-passport',
-    Logo: lazy(async () => import('./web-passport/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./web-passport/logo-dark.svg?react')),
-    Component: lazy(async () => import('./web-passport/README.mdx')),
+    Logo: safeLazy(async () => import('./web-passport/logo.svg?react')),
+    DarkLogo: safeLazy(async () => import('./web-passport/logo-dark.svg?react')),
+    Component: safeLazy(async () => import('./web-passport/README.mdx')),
     metadata: webPassport,
   },
   {
     order: 999,
     id: 'web-gpt-plugin',
-    Logo: lazy(async () => import('./web-gpt-plugin/logo.svg?react')),
+    Logo: safeLazy(async () => import('./web-gpt-plugin/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./web-gpt-plugin/README.mdx')),
+    Component: safeLazy(async () => import('./web-gpt-plugin/README.mdx')),
     metadata: webGptPlugin,
   },
   {
     order: Number.POSITIVE_INFINITY,
     id: 'api-express',
-    Logo: lazy(async () => import('./api-express/logo.svg?react')),
-    DarkLogo: lazy(async () => import('./api-express/logo-dark.svg?react')),
-    Component: lazy(async () => import('./api-express/README.mdx')),
+    Logo: safeLazy(async () => import('./api-express/logo.svg?react')),
+    DarkLogo: safeLazy(async () => import('./api-express/logo-dark.svg?react')),
+    Component: safeLazy(async () => import('./api-express/README.mdx')),
     metadata: apiExpress,
   },
   {
     order: Number.POSITIVE_INFINITY,
     id: 'api-python',
-    Logo: lazy(async () => import('./api-python/logo.svg?react')),
+    Logo: safeLazy(async () => import('./api-python/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./api-python/README.mdx')),
+    Component: safeLazy(async () => import('./api-python/README.mdx')),
     metadata: apiPython,
   },
   {
     order: Number.POSITIVE_INFINITY,
     id: 'api-spring-boot',
-    Logo: lazy(async () => import('./api-spring-boot/logo.svg?react')),
+    Logo: safeLazy(async () => import('./api-spring-boot/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./api-spring-boot/README.mdx')),
+    Component: safeLazy(async () => import('./api-spring-boot/README.mdx')),
     metadata: apiSpringBoot,
   },
   {
     order: Number.POSITIVE_INFINITY,
     id: 'third-party-oidc',
-    Logo: lazy(async () => import('./third-party-oidc/logo.svg?react')),
+    Logo: safeLazy(async () => import('./third-party-oidc/logo.svg?react')),
     DarkLogo: undefined,
-    Component: lazy(async () => import('./third-party-oidc/README.mdx')),
+    Component: safeLazy(async () => import('./third-party-oidc/README.mdx')),
     metadata: thirdPartyOidc,
   },
 ]);
diff --git a/packages/console/src/assets/docs/guides/types.ts b/packages/console/src/assets/docs/guides/types.ts
index 9e34b6771..dcc99e603 100644
--- a/packages/console/src/assets/docs/guides/types.ts
+++ b/packages/console/src/assets/docs/guides/types.ts
@@ -1,6 +1,6 @@
 import { type ApplicationType } from '@logto/schemas';
 import { type MDXProps } from 'mdx/types';
-import { type LazyExoticComponent, type FunctionComponent } from 'react';
+import { type LazyExoticComponent, type ComponentType, type SVGProps } from 'react';
 
 /**
  * The guide metadata type. The directory name that the metadata is in will be the
@@ -48,11 +48,11 @@ export type Guide = {
   /** The unique identifier of the guide. */
   id: string;
   Logo:
-    | LazyExoticComponent<SvgComponent>
+    | LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>
     | ((props: { readonly className?: string }) => JSX.Element);
   DarkLogo?:
-    | LazyExoticComponent<SvgComponent>
+    | LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>
     | ((props: { readonly className?: string }) => JSX.Element);
-  Component: LazyExoticComponent<FunctionComponent<MDXProps>>;
+  Component: LazyExoticComponent<ComponentType<MDXProps>>;
   metadata: Readonly<GuideMetadata>;
 };
diff --git a/packages/console/src/assets/docs/single-sign-on/index.ts b/packages/console/src/assets/docs/single-sign-on/index.ts
index 775e05e21..250a4fd9b 100644
--- a/packages/console/src/assets/docs/single-sign-on/index.ts
+++ b/packages/console/src/assets/docs/single-sign-on/index.ts
@@ -1,16 +1,17 @@
 import { SsoProviderName } from '@logto/schemas';
 import { type MDXProps } from 'mdx/types';
-import { lazy, type FunctionComponent, type LazyExoticComponent } from 'react';
+import { type ComponentType, type LazyExoticComponent } from 'react';
+import { safeLazy } from 'react-safe-lazy';
 
-type GuideComponentType = LazyExoticComponent<FunctionComponent<MDXProps>>;
+type GuideComponentType = LazyExoticComponent<ComponentType<MDXProps>>;
 
 const ssoConnectorGuides: Readonly<{ [key in SsoProviderName]?: GuideComponentType }> = {
-  [SsoProviderName.SAML]: lazy(async () => import('./saml/README.mdx')),
-  [SsoProviderName.OIDC]: lazy(async () => import('./oidc/README.mdx')),
-  [SsoProviderName.AZURE_AD]: lazy(async () => import('./azure-ad/README.mdx')),
-  [SsoProviderName.GOOGLE_WORKSPACE]: lazy(async () => import('./google-workspace/README.mdx')),
-  [SsoProviderName.OKTA]: lazy(async () => import('./okta/README.mdx')),
-  [SsoProviderName.AZURE_AD_OIDC]: lazy(async () => import('./azure-oidc/README.mdx')),
+  [SsoProviderName.SAML]: safeLazy(async () => import('./saml/README.mdx')),
+  [SsoProviderName.OIDC]: safeLazy(async () => import('./oidc/README.mdx')),
+  [SsoProviderName.AZURE_AD]: safeLazy(async () => import('./azure-ad/README.mdx')),
+  [SsoProviderName.GOOGLE_WORKSPACE]: safeLazy(async () => import('./google-workspace/README.mdx')),
+  [SsoProviderName.OKTA]: safeLazy(async () => import('./okta/README.mdx')),
+  [SsoProviderName.AZURE_AD_OIDC]: safeLazy(async () => import('./azure-oidc/README.mdx')),
 };
 
 export default ssoConnectorGuides;
diff --git a/packages/console/src/components/Guide/index.tsx b/packages/console/src/components/Guide/index.tsx
index d68f76139..7bad21cab 100644
--- a/packages/console/src/components/Guide/index.tsx
+++ b/packages/console/src/components/Guide/index.tsx
@@ -1,6 +1,13 @@
 import { type ApplicationResponse } from '@logto/schemas';
 import classNames from 'classnames';
-import { type LazyExoticComponent, Suspense, createContext, useContext } from 'react';
+import {
+  type ComponentType,
+  type LazyExoticComponent,
+  type SVGProps,
+  Suspense,
+  createContext,
+  useContext,
+} from 'react';
 
 import { guides } from '@/assets/docs/guides';
 import { type GuideMetadata } from '@/assets/docs/guides/types';
@@ -16,7 +23,7 @@ import styles from './index.module.scss';
 export type GuideContextType = {
   metadata: Readonly<GuideMetadata>;
   Logo?:
-    | LazyExoticComponent<SvgComponent>
+    | LazyExoticComponent<ComponentType<SVGProps<SVGSVGElement>>>
     | ((props: { readonly className?: string }) => JSX.Element);
   isCompact: boolean;
   app?: ApplicationResponse;