create unstated component instanses in CSR

packages/app/src/client/services/AdminUserGroupDetailContainer.js

@@ -2,15 +2,16 @@
  * TODO 85062: AdminUserGroupDetailContainer is under transplantation to UserGroupDetailPage.tsx
  */
 
+import { isServer } from '@growi/core';
 import { Container } from 'unstated';
 
+import {
+  apiv3Get, apiv3Delete, apiv3Put, apiv3Post,
+} from '~/client/util/apiv3-client';
 import loggerFactory from '~/utils/logger';
 
 import { toastError } from '../util/apiNotification';
 
-import {
-  apiv3Get, apiv3Delete, apiv3Put, apiv3Post,
-} from '~/client/util/apiv3-client';
 
 // eslint-disable-next-line no-unused-vars
 const logger = loggerFactory('growi:services:AdminUserGroupDetailContainer');
@@ -24,6 +25,10 @@ export default class AdminUserGroupDetailContainer extends Container {
   constructor(appContainer) {
     super();
 
+    if (isServer()) {
+      return;
+    }
+
     this.appContainer = appContainer;
 
     const rootElem = document.getElementById('admin-user-group-detail');

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

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { isClient } from '@growi/core';
 import {
   NextPage, GetServerSideProps, GetServerSidePropsContext,
 } from 'next';
@@ -7,7 +8,7 @@ import { useTranslation } from 'next-i18next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-import { Provider } from 'unstated';
+import { Container, Provider } from 'unstated';
 
 import AdminAppContainer from '~/client/services/AdminAppContainer';
 import AdminBasicSecurityContainer from '~/client/services/AdminBasicSecurityContainer';
@@ -26,7 +27,7 @@ import AdminOidcSecurityContainer from '~/client/services/AdminOidcSecurityConta
 import AdminSamlSecurityContainer from '~/client/services/AdminSamlSecurityContainer';
 import AdminSlackIntegrationLegacyContainer from '~/client/services/AdminSlackIntegrationLegacyContainer';
 import AdminTwitterSecurityContainer from '~/client/services/AdminTwitterSecurityContainer';
-// import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
+import AdminUserGroupDetailContainer from '~/client/services/AdminUserGroupDetailContainer';
 import AdminUsersContainer from '~/client/services/AdminUsersContainer';
 import { CrowiRequest } from '~/interfaces/crowi-request';
 import PluginUtils from '~/server/plugins/plugin-utils';
@@ -58,6 +59,7 @@ const ElasticsearchManagement = dynamic(() => import('../../components/Admin/Ela
 // named export
 const AuditLogManagement = dynamic(() => import('../../components/Admin/AuditLogManagement').then(module => module.AuditLogManagement));
 
+
 const AdminLayout = dynamic(() => import('../../components/Layout/AdminLayout'), { ssr: false });
 
 const pluginUtils = new PluginUtils();
@@ -167,57 +169,67 @@ const AdminMarkdownSettingsPage: NextPage<Props> = (props: Props) => {
 
   // useEnvVars(props.envVars);
 
+  const injectableContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    // Create unstated container instances (except Security)
+    const adminAppContainer = new AdminAppContainer();
+    const adminImportContainer = new AdminImportContainer();
+    const adminHomeContainer = new AdminHomeContainer();
+    const adminCustomizeContainer = new AdminCustomizeContainer();
+    const adminUsersContainer = new AdminUsersContainer();
+    const adminExternalAccountsContainer = new AdminExternalAccountsContainer();
+    const adminNotificationContainer = new AdminNotificationContainer();
+    const adminSlackIntegrationLegacyContainer = new AdminSlackIntegrationLegacyContainer();
+    const adminMarkDownContainer = new AdminMarkDownContainer();
+    const adminUserGroupDetailContainer = new AdminUserGroupDetailContainer();
+
+    injectableContainers.push(
+      adminAppContainer,
+      adminImportContainer,
+      adminHomeContainer,
+      adminCustomizeContainer,
+      adminUsersContainer,
+      adminExternalAccountsContainer,
+      adminNotificationContainer,
+      adminSlackIntegrationLegacyContainer,
+      adminMarkDownContainer,
+      adminUserGroupDetailContainer,
+    );
+  }
+
+
+  const adminSecurityContainers: Container<any>[] = [];
+
+  if (isClient()) {
+    const adminSecuritySettingElem = document.getElementById('admin-security-setting');
+
+    if (adminSecuritySettingElem != null) {
+      const adminGeneralSecurityContainer = new AdminGeneralSecurityContainer();
+      const adminLocalSecurityContainer = new AdminLocalSecurityContainer();
+      const adminLdapSecurityContainer = new AdminLdapSecurityContainer();
+      const adminSamlSecurityContainer = new AdminSamlSecurityContainer();
+      const adminOidcSecurityContainer = new AdminOidcSecurityContainer();
+      const adminBasicSecurityContainer = new AdminBasicSecurityContainer();
+      const adminGoogleSecurityContainer = new AdminGoogleSecurityContainer();
+      const adminGitHubSecurityContainer = new AdminGitHubSecurityContainer();
+      const adminTwitterSecurityContainer = new AdminTwitterSecurityContainer();
+
+      adminSecurityContainers.push(
+        adminGeneralSecurityContainer,
+        adminLocalSecurityContainer,
+        adminLdapSecurityContainer,
+        adminSamlSecurityContainer,
+        adminOidcSecurityContainer,
+        adminBasicSecurityContainer,
+        adminGoogleSecurityContainer,
+        adminGitHubSecurityContainer,
+        adminTwitterSecurityContainer,
+      );
+    }
+
+  }
 
-  /*
-  * Create unstated container instances
-  */
-  //  Except Security
-  const adminAppContainer = new AdminAppContainer();
-  const adminImportContainer = new AdminImportContainer();
-  const adminHomeContainer = new AdminHomeContainer();
-  const adminCustomizeContainer = new AdminCustomizeContainer();
-  const adminUsersContainer = new AdminUsersContainer();
-  const adminExternalAccountsContainer = new AdminExternalAccountsContainer();
-  const adminNotificationContainer = new AdminNotificationContainer();
-  const adminSlackIntegrationLegacyContainer = new AdminSlackIntegrationLegacyContainer();
-  const adminMarkDownContainer = new AdminMarkDownContainer();
-  // const adminUserGroupDetailContainer = new AdminUserGroupDetailContainer();
-
-  const injectableContainers = [
-    adminAppContainer,
-    adminImportContainer,
-    adminHomeContainer,
-    adminCustomizeContainer,
-    adminUsersContainer,
-    adminExternalAccountsContainer,
-    adminNotificationContainer,
-    adminSlackIntegrationLegacyContainer,
-    adminMarkDownContainer,
-    // adminUserGroupDetailContainer,
-  ];
-
-  // Security
-  const adminGeneralSecurityContainer = new AdminGeneralSecurityContainer();
-  const adminLocalSecurityContainer = new AdminLocalSecurityContainer();
-  const adminLdapSecurityContainer = new AdminLdapSecurityContainer();
-  const adminSamlSecurityContainer = new AdminSamlSecurityContainer();
-  const adminOidcSecurityContainer = new AdminOidcSecurityContainer();
-  const adminBasicSecurityContainer = new AdminBasicSecurityContainer();
-  const adminGoogleSecurityContainer = new AdminGoogleSecurityContainer();
-  const adminGitHubSecurityContainer = new AdminGitHubSecurityContainer();
-  const adminTwitterSecurityContainer = new AdminTwitterSecurityContainer();
-
-  const adminSecurityContainers = [
-    adminGeneralSecurityContainer,
-    adminLocalSecurityContainer,
-    adminLdapSecurityContainer,
-    adminSamlSecurityContainer,
-    adminOidcSecurityContainer,
-    adminBasicSecurityContainer,
-    adminGoogleSecurityContainer,
-    adminGitHubSecurityContainer,
-    adminTwitterSecurityContainer,
-  ];
 
   return (
     <Provider inject={[...injectableContainers, ...adminSecurityContainers]}>