dynamic import

packages/app/src/client/services/page-operation.ts

@@ -1,10 +1,9 @@
-import { SubscriptionStatusType } from '@growi/core';
+import { SubscriptionStatusType, Nullable } from '@growi/core';
 import urljoin from 'url-join';
 
 import { OptionsToSave } from '~/interfaces/editor-settings';
 import loggerFactory from '~/utils/logger';
 
-import { Nullable } from '@growi/core';
 
 import { toastError } from '../util/apiNotification';
 import { apiPost } from '../util/apiv1-client';
@@ -165,8 +164,8 @@ export const saveAndReload = async(optionsToSave: OptionsToSave, pageInfo: PageI
     res = await createPage(path, markdown, options);
   }
   else {
-    if(revisionId == null){
-      const msg = '\'revisionId\' requires to update page';
+    if (revisionId == null) {
+      const msg = '\'revisionId\' is required to update page';
       throw new Error(msg);
     }
     res = await updatePage(pageId, revisionId, markdown, options);

packages/app/src/components/PageEditor/EditorNavbarBottom.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useState, useEffect } from 'react';
 
+import dynamic from 'next/dynamic';
 import { Collapse, Button } from 'reactstrap';
 
 
@@ -9,29 +10,27 @@ import {
   EditorMode, useDrawerOpened, useEditorMode, useIsDeviceSmallerThanMd,
 } from '~/stores/ui';
 
-import SavePageControls from '../SavePageControls';
-import SlackLogo from '../SlackLogo';
-import { SlackNotification } from '../SlackNotification';
 
+const SavePageControls = dynamic(() => import('~/components/SavePageControls').then(mod => mod.SavePageControls), { ssr: false });
+const SlackLogo = dynamic(() => import('~/components/SlackLogo').then(mod => mod.SlackLogo), { ssr: false });
+const SlackNotification = dynamic(() => import('~/components/SlackNotification').then(mod => mod.SlackNotification), { ssr: false });
+const OptionsSelector = dynamic(() => import('~/components/PageEditor/OptionsSelector').then(mod => mod.OptionsSelector), { ssr: false });
 
-import OptionsSelector from './OptionsSelector';
 
-const EditorNavbarBottom = (props) => {
-
-  const { data: editorMode } = useEditorMode();
+const EditorNavbarBottom = (): JSX.Element => {
 
   const [isExpanded, setExpanded] = useState(false);
-
   const [isSlackExpanded, setSlackExpanded] = useState(false);
 
+  const { data: editorMode } = useEditorMode();
   const { data: isSlackConfigured } = useIsSlackConfigured();
   const { mutate: mutateDrawerOpened } = useDrawerOpened();
   const { data: isDeviceSmallerThanMd } = useIsDeviceSmallerThanMd();
-  const additionalClasses = ['grw-editor-navbar-bottom'];
   const { data: currentPagePath } = useCurrentPagePath();
   const { data: slackChannelsData } = useSWRxSlackChannels(currentPagePath);
 
   const { data: isSlackEnabled, mutate: mutateIsSlackEnabled } = useIsSlackEnabled();
+  const additionalClasses = ['grw-editor-navbar-bottom'];
 
   const [slackChannelsStr, setSlackChannelsStr] = useState<string>('');
 

packages/app/src/components/PageEditor/OptionsSelector.tsx

@@ -340,7 +340,7 @@ const ConfigurationDropdown = memo(({ onConfirmEnableTextlint }: ConfigurationDr
 ConfigurationDropdown.displayName = 'ConfigurationDropdown';
 
 
-const OptionsSelector = (): JSX.Element => {
+export const OptionsSelector = (): JSX.Element => {
   const [isDownloadDictModalShown, setDownloadDictModalShown] = useState(false);
 
   const { data: editorSettings, turnOffAskingBeforeDownloadLargeFiles } = useEditorSettings();
@@ -394,6 +394,3 @@ const OptionsSelector = (): JSX.Element => {
   );
 
 };
-
-
-export default OptionsSelector;

packages/app/src/components/SavePageControls.tsx

@@ -9,13 +9,13 @@ import {
 
 // import PageContainer from '~/client/services/PageContainer';
 import { CustomWindow } from '~/interfaces/global';
+import { IPageGrantData } from '~/interfaces/page';
 import {
   useCurrentPagePath, useIsEditable, useCurrentPageId, useIsAclEnabled,
 } from '~/stores/context';
 import { useIsEnabledUnsavedWarning } from '~/stores/editor';
 import { useSelectedGrant } from '~/stores/ui';
 import loggerFactory from '~/utils/logger';
-import { IPageGrantData } from '~/interfaces/page';
 
 import GrantSelector from './SavePageControls/GrantSelector';
 
@@ -50,9 +50,7 @@ export const SavePageControls = (props: Props): JSX.Element | null => {
   const grant = grantData?.grant || 1;
   const grantedGroup = grantData?.grantedGroup;
 
-  const {
-    // pageContainer,
-  } = props;
+  // const {  pageContainer } = props;
 
   const updateGrantHandler = (grantData: IPageGrantData): void => {
     mutateGrant(grantData);
@@ -123,5 +121,3 @@ export const SavePageControls = (props: Props): JSX.Element | null => {
     </div>
   );
 };
-
-export default SavePageControls;

packages/app/src/components/SlackLogo.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const SlackLogo = () => (
+export const SlackLogo = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 448 448"
@@ -17,5 +17,3 @@ const SlackLogo = () => (
     />
   </svg>
 );
-
-export default SlackLogo;