make admin pages universal

apps/app/src/pages/admin/[...path].page.tsx

@@ -1,9 +1,9 @@
-import {
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import dynamic from 'next/dynamic';
 
-import { CommonProps } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 import { useIsMaintenanceMode } from '~/stores/maintenanceMode';
 

apps/app/src/pages/admin/app.page.tsx

@@ -1,14 +1,16 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminAppContainer from '~/client/services/AdminAppContainer';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 import { useIsMaintenanceMode } from '~/stores/maintenanceMode';
 
@@ -25,12 +27,15 @@ const AdminAppPage: NextPage<CommonProps> = (props) => {
   useIsMaintenanceMode(props.isMaintenanceMode);
   useCurrentUser(props.currentUser ?? null);
 
-  const injectableContainers: Container<any>[] = [];
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
 
-  if (isClient()) {
-    const adminAppContainer = new AdminAppContainer();
-    injectableContainers.push(adminAppContainer);
-  }
+  useEffect(() => {
+    (async() => {
+      const AdminAppContainer = (await import('~/client/services/AdminAppContainer')).default;
+      const adminAppContainer = new AdminAppContainer();
+      injectableContainers.push(adminAppContainer);
+    })();
+  }, [injectableContainers]);
 
   const title = generateCustomTitle(props, t('headers.app_settings'));
 

apps/app/src/pages/admin/audit-log.page.tsx

@@ -1,13 +1,14 @@
-import {
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 
-import { SupportedActionType } from '~/interfaces/activity';
-import { CrowiRequest } from '~/interfaces/crowi-request';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { SupportedActionType } from '~/interfaces/activity';
+import type { CrowiRequest } from '~/interfaces/crowi-request';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import {
   useCurrentUser, useAuditLogEnabled, useAuditLogAvailableActions, useActivityExpirationSeconds,
 } from '~/stores/context';

apps/app/src/pages/admin/customize.page.tsx

@@ -1,15 +1,17 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
-import { CrowiRequest } from '~/interfaces/crowi-request';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CrowiRequest } from '~/interfaces/crowi-request';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCustomizeTitle, useCurrentUser, useIsCustomizedLogoUploaded } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';
@@ -33,13 +35,15 @@ const AdminCustomizeSettingsPage: NextPage<Props> = (props) => {
 
   const componentTitle = t('customize_settings.customize_settings');
   const pageTitle = generateCustomTitle(props, componentTitle);
-  const injectableContainers: Container<any>[] = [];
-
-  if (isClient()) {
-    const adminCustomizeContainer = new AdminCustomizeContainer();
-
-    injectableContainers.push(adminCustomizeContainer);
-  }
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
+
+  useEffect(() => {
+    (async() => {
+      const AdminCustomizeContainer = (await import('~/client/services/AdminCustomizeContainer')).default;
+      const adminCustomizeContainer = new AdminCustomizeContainer();
+      injectableContainers.push(adminCustomizeContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/data-transfer.page.tsx

@@ -1,14 +1,15 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminAppContainer from '~/client/services/AdminAppContainer';
-import { CommonProps } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';
@@ -27,11 +28,15 @@ const DataTransferPage: NextPage<Props> = (props) => {
 
   const title = t('g2g_data_transfer.data_transfer');
 
-  const injectableContainers: Container<any>[] = [];
-  if (isClient()) {
-    const adminAppContainer = new AdminAppContainer();
-    injectableContainers.push(adminAppContainer);
-  }
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
+
+  useEffect(() => {
+    (async() => {
+      const AdminAppContainer = (await import('~/client/services/AdminAppContainer')).default;
+      const adminAppContainer = new AdminAppContainer();
+      injectableContainers.push(adminAppContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/export.page.tsx

@@ -1,14 +1,16 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminAppContainer from '~/client/services/AdminAppContainer';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';
@@ -24,12 +26,16 @@ const AdminExportDataArchivePage: NextPage<CommonProps> = (props) => {
 
   const componentTitle = t('export_management.export_archive_data');
   const pageTitle = generateCustomTitle(props, componentTitle);
-  const injectableContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminAppContainer = new AdminAppContainer();
-    injectableContainers.push(adminAppContainer);
-  }
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
+
+  useEffect(() => {
+    (async() => {
+      const AdminAppContainer = (await import('~/client/services/AdminAppContainer')).default;
+      const adminAppContainer = new AdminAppContainer();
+      injectableContainers.push(adminAppContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/global-notification/[globalNotificationId].page.tsx

@@ -1,19 +1,18 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 
-import { isClient, objectIdUtils } from '@growi/core/dist/utils';
-import {
+import { objectIdUtils } from '@growi/core/dist/utils';
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-
-import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
-import { toastError } from '~/client/util/toastr';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../../utils/admin-page-util';
@@ -33,12 +32,16 @@ const AdminGlobalNotificationNewPage: NextPage<CommonProps> = (props) => {
 
 
   useEffect(() => {
+    const toastError = import('~/client/util/toastr').then(mod => mod.toastError);
+
     if (globalNotificationId == null) {
       router.push('/admin/notification');
     }
     if ((currentGlobalNotificationId != null && !objectIdUtils.isValidObjectId(currentGlobalNotificationId))) {
-      toastError(t('notification_settings.not_found_global_notification_triggerid'));
-      router.push('/admin/global-notification/new');
+      (async() => {
+        (await toastError)(t('notification_settings.not_found_global_notification_triggerid'));
+        router.push('/admin/global-notification/new');
+      })();
       return;
     }
   }, [currentGlobalNotificationId, globalNotificationId, router, t]);
@@ -47,13 +50,15 @@ const AdminGlobalNotificationNewPage: NextPage<CommonProps> = (props) => {
   const title = t('external_notification.external_notification');
   const customTitle = generateCustomTitle(props, title);
 
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
 
-  const injectableContainers: Container<any>[] = [];
-
-  if (isClient()) {
-    const adminNotificationContainer = new AdminNotificationContainer();
-    injectableContainers.push(adminNotificationContainer);
-  }
+  useEffect(() => {
+    (async() => {
+      const AdminNotificationContainer = (await import('~/client/services/AdminNotificationContainer')).default;
+      const adminNotificationContainer = new AdminNotificationContainer();
+      injectableContainers.push(adminNotificationContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     <ForbiddenPage />;

apps/app/src/pages/admin/global-notification/new.page.tsx

@@ -1,14 +1,15 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../../utils/admin-page-util';
@@ -23,12 +24,16 @@ const AdminGlobalNotificationNewPage: NextPage<CommonProps> = (props) => {
   useCurrentUser(props.currentUser ?? null);
 
   const title = t('external_notification.external_notification');
-  const injectableContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminNotificationContainer = new AdminNotificationContainer();
-    injectableContainers.push(adminNotificationContainer);
-  }
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
+
+  useEffect(() => {
+    (async() => {
+      const AdminNotificationContainer = (await import('~/client/services/AdminNotificationContainer')).default;
+      const adminNotificationContainer = new AdminNotificationContainer();
+      injectableContainers.push(adminNotificationContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     <ForbiddenPage />;

apps/app/src/pages/admin/importer.page.tsx

@@ -1,14 +1,16 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminImportContainer from '~/client/services/AdminImportContainer';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';
@@ -24,12 +26,16 @@ const AdminDataImportPage: NextPage<CommonProps> = (props) => {
 
   const componentTitle = t('importer_management.import_data');
   const pageTitle = generateCustomTitle(props, componentTitle);
-  const injectableContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminImportContainer = new AdminImportContainer();
-    injectableContainers.push(adminImportContainer);
-  }
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
+
+  useEffect(() => {
+    (async() => {
+      const AdminImportContainer = (await import('~/client/services/AdminImportContainer')).default;
+      const adminImportContainer = new AdminImportContainer();
+      injectableContainers.push(adminImportContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/index.page.tsx

@@ -1,15 +1,17 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminHomeContainer from '~/client/services/AdminHomeContainer';
-import { CrowiRequest } from '~/interfaces/crowi-request';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CrowiRequest } from '~/interfaces/crowi-request';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import {
   useCurrentUser, useGrowiCloudUri, useGrowiAppIdForGrowiCloud,
 } from '~/stores/context';
@@ -41,13 +43,15 @@ const AdminHomepage: NextPage<Props> = (props) => {
 
   const title = generateCustomTitle(props, t('wiki_management_homepage'));
 
-  const injectableContainers: Container<any>[] = [];
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
 
-  if (isClient()) {
-    const adminHomeContainer = new AdminHomeContainer();
-
-    injectableContainers.push(adminHomeContainer);
-  }
+  useEffect(() => {
+    (async() => {
+      const AdminHomeContainer = (await import('~/client/services/AdminHomeContainer')).default;
+      const adminHomeContainer = new AdminHomeContainer();
+      injectableContainers.push(adminHomeContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/markdown.page.tsx

@@ -1,15 +1,16 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
-
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminMarkDownContainer from '~/client/services/AdminMarkDownContainer';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';
@@ -26,12 +27,15 @@ const AdminMarkdownPage: NextPage<CommonProps> = (props) => {
   const componentTitle = t('markdown_settings.markdown_settings');
   const pageTitle = generateCustomTitle(props, componentTitle);
 
-  const injectableContainers: Container<any>[] = [];
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
 
-  if (isClient()) {
-    const adminMarkDownContainer = new AdminMarkDownContainer();
-    injectableContainers.push(adminMarkDownContainer);
-  }
+  useEffect(() => {
+    (async() => {
+      const AdminMarkDownContainer = (await import('~/client/services/AdminMarkDownContainer')).default;
+      const adminMarkDownContainer = new AdminMarkDownContainer();
+      injectableContainers.push(adminMarkDownContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/notification.page.tsx

@@ -1,14 +1,16 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminNotificationContainer from '~/client/services/AdminNotificationContainer';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';
@@ -24,13 +26,16 @@ const AdminExternalNotificationPage: NextPage<CommonProps> = (props) => {
 
   const componentTitle = t('external_notification.external_notification');
   const pageTitle = generateCustomTitle(props, componentTitle);
-  const injectableContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminNotificationContainer = new AdminNotificationContainer();
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
 
-    injectableContainers.push(adminNotificationContainer);
-  }
+  useEffect(() => {
+    (async() => {
+      const AdminNotificationContainer = (await import('~/client/services/AdminNotificationContainer')).default;
+      const adminNotificationContainer = new AdminNotificationContainer();
+      injectableContainers.push(adminNotificationContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/plugins.page.tsx

@@ -1,15 +1,17 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
 
-import AdminAppContainer from '~/client/services/AdminAppContainer';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 import { useIsMaintenanceMode } from '~/stores/maintenanceMode';
 
@@ -30,12 +32,16 @@ const AdminAppPage: NextPage<CommonProps> = (props) => {
   useCurrentUser(props.currentUser ?? null);
 
   const title = t('plugins.plugins');
-  const injectableContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminAppContainer = new AdminAppContainer();
-    injectableContainers.push(adminAppContainer);
-  }
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
+
+  useEffect(() => {
+    (async() => {
+      const AdminAppContainer = (await import('~/client/services/AdminAppContainer')).default;
+      const adminAppContainer = new AdminAppContainer();
+      injectableContainers.push(adminAppContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/search.page.tsx

@@ -1,12 +1,13 @@
-import {
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 
-import { CrowiRequest } from '~/interfaces/crowi-request';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CrowiRequest } from '~/interfaces/crowi-request';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useIsSearchServiceReachable, useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';

apps/app/src/pages/admin/security.page.tsx

@@ -1,21 +1,17 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
-
-import AdminGeneralSecurityContainer from '~/client/services/AdminGeneralSecurityContainer';
-import AdminGitHubSecurityContainer from '~/client/services/AdminGitHubSecurityContainer';
-import AdminGoogleSecurityContainer from '~/client/services/AdminGoogleSecurityContainer';
-import AdminLdapSecurityContainer from '~/client/services/AdminLdapSecurityContainer';
-import AdminLocalSecurityContainer from '~/client/services/AdminLocalSecurityContainer';
-import AdminOidcSecurityContainer from '~/client/services/AdminOidcSecurityContainer';
-import AdminSamlSecurityContainer from '~/client/services/AdminSamlSecurityContainer';
-import { CrowiRequest } from '~/interfaces/crowi-request';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
+
+import type { CrowiRequest } from '~/interfaces/crowi-request';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser, useIsMailerSetup, useSiteUrl } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';
@@ -39,18 +35,30 @@ const AdminSecuritySettingsPage: NextPage<Props> = (props) => {
 
   const componentTitle = t('security_settings.security_settings');
   const pageTitle = generateCustomTitle(props, componentTitle);
-  const adminSecurityContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminSecuritySettingElem = document.getElementById('admin-security-setting');
+  const adminSecurityContainers: Container<any>[] = useMemo(() => [], []);
 
-    if (adminSecuritySettingElem != null) {
+  useEffect(() => {
+    (async() => {
+      const AdminGeneralSecurityContainer = (await import('~/client/services/AdminGeneralSecurityContainer')).default;
       const adminGeneralSecurityContainer = new AdminGeneralSecurityContainer();
+
+      const AdminLocalSecurityContainer = (await import('~/client/services/AdminLocalSecurityContainer')).default;
       const adminLocalSecurityContainer = new AdminLocalSecurityContainer();
+
+      const AdminLdapSecurityContainer = (await import('~/client/services/AdminLdapSecurityContainer')).default;
       const adminLdapSecurityContainer = new AdminLdapSecurityContainer();
+
+      const AdminSamlSecurityContainer = (await import('~/client/services/AdminSamlSecurityContainer')).default;
       const adminSamlSecurityContainer = new AdminSamlSecurityContainer();
+
+      const AdminOidcSecurityContainer = (await import('~/client/services/AdminOidcSecurityContainer')).default;
       const adminOidcSecurityContainer = new AdminOidcSecurityContainer();
+
+      const AdminGoogleSecurityContainer = (await import('~/client/services/AdminGoogleSecurityContainer')).default;
       const adminGoogleSecurityContainer = new AdminGoogleSecurityContainer();
+
+      const AdminGitHubSecurityContainer = (await import('~/client/services/AdminGitHubSecurityContainer')).default;
       const adminGitHubSecurityContainer = new AdminGitHubSecurityContainer();
 
       adminSecurityContainers.push(
@@ -62,8 +70,8 @@ const AdminSecuritySettingsPage: NextPage<Props> = (props) => {
         adminGoogleSecurityContainer,
         adminGitHubSecurityContainer,
       );
-    }
-  }
+    })();
+  }, [adminSecurityContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/slack-integration-legacy.page.tsx

@@ -1,14 +1,16 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminSlackIntegrationLegacyContainer from '~/client/services/AdminSlackIntegrationLegacyContainer';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';
@@ -23,12 +25,16 @@ const AdminLegacySlackIntegrationPage: NextPage<CommonProps> = (props) => {
 
   const title = t('slack_integration_legacy.slack_integration_legacy');
   const headTitle = generateCustomTitle(props, title);
-  const injectableContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminSlackIntegrationLegacyContainer = new AdminSlackIntegrationLegacyContainer();
-    injectableContainers.push(adminSlackIntegrationLegacyContainer);
-  }
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
+
+  useEffect(() => {
+    (async() => {
+      const AdminSlackIntegrationLegacyContainer = (await import('~/client/services/AdminSlackIntegrationLegacyContainer')).default;
+      const adminSlackIntegrationLegacyContainer = new AdminSlackIntegrationLegacyContainer();
+      injectableContainers.push(adminSlackIntegrationLegacyContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/user-group-detail/[userGroupId].page.tsx

@@ -1,4 +1,4 @@
-import {
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
@@ -6,8 +6,9 @@ import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
 
-import { CrowiRequest } from '~/interfaces/crowi-request';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CrowiRequest } from '~/interfaces/crowi-request';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useIsAclEnabled, useCurrentUser } from '~/stores/context';
 import { useIsMaintenanceMode } from '~/stores/maintenanceMode';
 

apps/app/src/pages/admin/user-groups.page.tsx

@@ -1,12 +1,13 @@
-import {
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
 
-import { CrowiRequest } from '~/interfaces/crowi-request';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CrowiRequest } from '~/interfaces/crowi-request';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useIsAclEnabled, useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../utils/admin-page-util';

apps/app/src/pages/admin/users/external-accounts.page.tsx

@@ -1,14 +1,15 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminExternalAccountsContainer from '~/client/services/AdminExternalAccountsContainer';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CommonProps } from '~/pages/utils/commons';
 import { useCurrentUser } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../../utils/admin-page-util';
@@ -23,15 +24,16 @@ const AdminUserManagementPage: NextPage<CommonProps> = (props) => {
   useCurrentUser(props.currentUser ?? null);
 
   const title = t('user_management.external_account');
-  const injectableContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminExternalAccountsContainer = new AdminExternalAccountsContainer();
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
 
-    injectableContainers.push(
-      adminExternalAccountsContainer,
-    );
-  }
+  useEffect(() => {
+    (async() => {
+      const AdminExternalAccountsContainer = (await import('~/client/services/AdminExternalAccountsContainer')).default;
+      const adminExternalAccountsContainer = new AdminExternalAccountsContainer();
+      injectableContainers.push(adminExternalAccountsContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;

apps/app/src/pages/admin/users/index.page.tsx

@@ -1,15 +1,17 @@
-import { isClient } from '@growi/core/dist/utils';
-import {
+import { useEffect, useMemo } from 'react';
+
+import type {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
 import { useTranslation } from 'next-i18next';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import { Container, Provider } from 'unstated';
+import type { Container } from 'unstated';
+import { Provider } from 'unstated';
 
-import AdminUsersContainer from '~/client/services/AdminUsersContainer';
-import { CrowiRequest } from '~/interfaces/crowi-request';
-import { CommonProps, generateCustomTitle } from '~/pages/utils/commons';
+import type { CrowiRequest } from '~/interfaces/crowi-request';
+import type { CommonProps } from '~/pages/utils/commons';
+import { generateCustomTitle } from '~/pages/utils/commons';
 import { useCurrentUser, useIsMailerSetup } from '~/stores/context';
 
 import { retrieveServerSideProps } from '../../../utils/admin-page-util';
@@ -31,13 +33,16 @@ const AdminUserManagementPage: NextPage<Props> = (props) => {
 
   const title = t('user_management.user_management');
   const headTitle = generateCustomTitle(props, title);
-  const injectableContainers: Container<any>[] = [];
 
-  if (isClient()) {
-    const adminUsersContainer = new AdminUsersContainer();
+  const injectableContainers: Container<any>[] = useMemo(() => [], []);
 
-    injectableContainers.push(adminUsersContainer);
-  }
+  useEffect(() => {
+    (async() => {
+      const AdminUsersContainer = (await import('~/client/services/AdminUsersContainer')).default;
+      const adminUsersContainer = new AdminUsersContainer();
+      injectableContainers.push(adminUsersContainer);
+    })();
+  }, [injectableContainers]);
 
   if (props.isAccessDeniedForNonAdminUser) {
     return <ForbiddenPage />;