[fix] some Compatibility bugs of Next.js SSR

IdeaMall · Aug 31, 2023 · 9e150f1 · 9e150f1 · github-actions · Aug 31, 2023
1 parent b44d54c
commit 9e150f1
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 70 deletions.
diff --git a/components/AdminFrame.tsx b/components/AdminFrame.tsx
@@ -1,16 +1,17 @@
 import { Role } from '@ideamall/data-model';
 import { Icon } from 'idea-react';
 import { observer } from 'mobx-react';
+import dynamic from 'next/dynamic';
 import { PropsWithChildren, PureComponent } from 'react';
 import { Container, Nav } from 'react-bootstrap';
 
 import { i18n } from '../models/Translation';
 import userStore from '../models/User';
 import { MainNavigator } from './MainNavigator';
 import { PageHead } from './PageHead';
-import { SessionBox } from './SessionBox';
 
-const { location } = globalThis,
+const SessionBox = dynamic(() => import('./SessionBox'), { ssr: false }),
+  { location } = globalThis,
   { t } = i18n;
 
 @observer

diff --git a/components/Goods/StyleEditor.tsx b/components/Goods/StyleEditor.tsx
@@ -3,7 +3,7 @@ import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { observePropsState } from 'mobx-react-helper';
 import { BadgeInput } from 'mobx-restful-table';
-import { MouseEvent, PureComponent } from 'react';
+import { Component, MouseEvent } from 'react';
 import { Button, Col, Form, Row } from 'react-bootstrap';
 
 import { i18n } from '../../models/Translation';
@@ -18,7 +18,7 @@ export interface GoodsStyleEditorProps {
 
 @observer
 @observePropsState
-export class GoodsStyleEditor extends PureComponent<GoodsStyleEditorProps> {
+export class GoodsStyleEditor extends Component<GoodsStyleEditorProps> {
   constructor(props: GoodsStyleEditorProps) {
     super(props);
     makeObservable(this);

diff --git a/components/MainNavigator.tsx b/components/MainNavigator.tsx
@@ -1,6 +1,6 @@
 import { Option, Select } from 'idea-react';
 import { observer } from 'mobx-react';
-import Link from 'next/link';
+import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import {
   Container,
@@ -11,7 +11,8 @@ import {
 } from 'react-bootstrap';
 
 import { i18n, LanguageName } from '../models/Translation';
-import { UserMenu } from './UserMenu';
+
+const UserMenu = dynamic(() => import('./UserMenu'), { ssr: false });
 
 const Name = process.env.NEXT_PUBLIC_SITE_NAME || '';
 
@@ -37,9 +38,8 @@ export const MainNavigator: FC<MainNavigatorProps> = observer(
 
           <Navbar.Collapse id="navbar-inner">
             <Nav className="me-auto">
-              <Link href="/component" passHref>
-                <Nav.Link>{t('component')}</Nav.Link>
-              </Link>
+              <Nav.Link href="/component">{t('component')}</Nav.Link>
+
               <Nav.Link target="_blank" href="https://github.com/IdeaMall/PWA">
                 {t('source_code')}
               </Nav.Link>

diff --git a/components/SessionBox.tsx b/components/SessionBox.tsx
@@ -3,7 +3,7 @@ import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { observePropsState } from 'mobx-react-helper';
 import Head from 'next/head';
-import { MouseEvent, PropsWithChildren, PureComponent } from 'react';
+import { Component, MouseEvent, PropsWithChildren } from 'react';
 
 import userStore, { guard } from '../models/User';
 
@@ -15,7 +15,7 @@ export type SessionBoxProps = PropsWithChildren<{
 
 @observer
 @observePropsState
-export class SessionBox extends PureComponent<SessionBoxProps> {
+export default class SessionBox extends Component<SessionBoxProps> {
   declare observedProps: SessionBoxProps;
 
   @computed

diff --git a/components/UserMenu.tsx b/components/UserMenu.tsx
@@ -1,31 +1,32 @@
 import { Role } from '@ideamall/data-model';
 import { observer } from 'mobx-react';
+import dynamic from 'next/dynamic';
 import { FC } from 'react';
 import { Button, Dropdown, DropdownButton } from 'react-bootstrap';
 
 import { i18n } from '../models/Translation';
 import userStore from '../models/User';
-import { SessionBox } from './SessionBox';
 
-const { t } = i18n;
+const SessionBox = dynamic(() => import('./SessionBox'), { ssr: false }),
+  { t } = i18n;
 
-export const UserMenu: FC = observer(() => {
+const UserMenu: FC = observer(() => {
   const { session } = userStore;
 
-  return (
-    <SessionBox>
-      {session ? (
-        <DropdownButton title={session.nickName || session.mobilePhone}>
-          {!session.roles?.includes(Role.Client) && (
-            <Dropdown.Item href="/admin">{t('dashboard')}</Dropdown.Item>
-          )}
-          <Dropdown.Item onClick={() => userStore.signOut()}>
-            {t('sign_out')}
-          </Dropdown.Item>
-        </DropdownButton>
-      ) : (
-        <Button>{t('sign_in')}</Button>
+  return session ? (
+    <DropdownButton title={session.nickName || session.mobilePhone}>
+      {!session.roles?.includes(Role.Client) && (
+        <Dropdown.Item href="/admin">{t('dashboard')}</Dropdown.Item>
       )}
+      <Dropdown.Item onClick={() => userStore.signOut()}>
+        {t('sign_out')}
+      </Dropdown.Item>
+    </DropdownButton>
+  ) : (
+    <SessionBox>
+      <Button>{t('sign_in')}</Button>
     </SessionBox>
   );
 });
+
+export default UserMenu;
diff --git a/package.json b/package.json
@@ -11,10 +11,10 @@
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "lodash": "^4.17.21",
-    "mobx": "^6.10.1",
+    "mobx": "^6.10.2",
     "mobx-i18n": "^0.4.1",
     "mobx-react": "^9.0.1",
-    "mobx-react-helper": "^0.2.5",
+    "mobx-react-helper": "^0.2.7",
     "mobx-restful": "^0.6.11",
     "mobx-restful-table": "^1.1.2",
     "next": "^13.4.19",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml