fix @node-rs/jieba and window not found (#1313)

* dynamic import

* perf: entry

* fix: jieba package

projects/app/next.config.js

@@ -7,7 +7,7 @@ const nextConfig = {
   output: 'standalone',
   reactStrictMode: process.env.NODE_ENV === 'development' ? false : true,
   compress: true,
-  webpack(config, { isServer }) {
+  webpack(config, { isServer, nextRuntime }) {
     Object.assign(config.resolve.alias, {
       '@mongodb-js/zstd': false,
       '@aws-sdk/credential-providers': false,
@@ -26,6 +26,10 @@ const nextConfig = {
           test: /\.svg$/i,
           issuer: /\.[jt]sx?$/,
           use: ['@svgr/webpack']
+        },
+        {
+          test: /\.node$/,
+          use: [{ loader: 'nextjs-node-loader' }]
         }
       ]),
       exprContextCritical: false,
@@ -33,11 +37,9 @@ const nextConfig = {
     };
 
     if (isServer) {
-      config.externals.push('isolated-vm');
       config.externals.push('worker_threads');
-      config.externals.push('@node-rs/jieba');
 
-      if (config.name === 'server') {
+      if (nextRuntime === 'nodejs') {
         // config.output.globalObject = 'self';
 
         const oldEntry = config.entry;
@@ -76,7 +78,10 @@ const nextConfig = {
   },
   transpilePackages: ['@fastgpt/*'],
   experimental: {
+    // 外部包独立打包
     serverComponentsExternalPackages: ['mongoose', 'pg'],
+    // 指定导出包优化，按需引入包模块
+    optimizePackageImports: ['mongoose', 'pg'],
     outputFileTracingRoot: path.join(__dirname, '../../')
   }
 };

projects/app/package.json

@@ -25,6 +25,7 @@
     "@fortaine/fetch-event-source": "^3.0.6",
     "@tanstack/react-query": "^4.24.10",
     "@types/nprogress": "^0.2.0",
+    "ahooks": "^3.7.11",
     "axios": "^1.5.1",
     "date-fns": "2.30.0",
     "dayjs": "^1.11.7",
@@ -57,7 +58,9 @@
     "remark-math": "^5.1.1",
     "request-ip": "^3.3.0",
     "sass": "^1.58.3",
-    "zustand": "^4.3.5"
+    "zustand": "^4.3.5",
+    "nextjs-node-loader": "^1.1.5",
+    "@node-rs/jieba": "1.10.0"
   },
   "devDependencies": {
     "@svgr/webpack": "^6.5.1",

projects/app/src/components/ChatBox/components/Empty.tsx

@@ -1,8 +1,10 @@
-import Markdown from '@/components/Markdown';
 import { useMarkdown } from '@/web/common/hooks/useMarkdown';
 import { Box, Card } from '@chakra-ui/react';
 import React from 'react';
 
+import dynamic from 'next/dynamic';
+const Markdown = dynamic(() => import('@/components/Markdown'), { ssr: false });
+
 const Empty = () => {
   const { data: chatProblem } = useMarkdown({ url: '/chatProblem.md' });
   const { data: versionIntro } = useMarkdown({ url: '/versionIntro.md' });

projects/app/src/components/Layout/index.tsx

@@ -10,6 +10,7 @@ import { getUnreadCount } from '@/web/support/user/inform/api';
 import dynamic from 'next/dynamic';
 
 import Auth from './auth';
+
 const Navbar = dynamic(() => import('./navbar'));
 const NavbarPhone = dynamic(() => import('./navbarPhone'));
 const UpdateInviteModal = dynamic(() => import('@/components/support/user/team/UpdateInviteModal'));
@@ -112,14 +113,13 @@ const Layout = ({ children }: { children: JSX.Element }) => {
             </Box>
           </>
         )}
-
-        {!!userInfo && <UpdateInviteModal />}
-        {isNotSufficientModal && !isHideNavbar && <NotSufficientModal />}
-        {!!userInfo && <SystemMsgModal />}
-        {!!userInfo && importantInforms.length > 0 && (
-          <ImportantInform informs={importantInforms} refetch={refetchUnRead} />
-        )}
       </Box>
+      {!!userInfo && <UpdateInviteModal />}
+      {isNotSufficientModal && !isHideNavbar && <NotSufficientModal />}
+      {!!userInfo && <SystemMsgModal />}
+      {!!userInfo && importantInforms.length > 0 && (
+        <ImportantInform informs={importantInforms} refetch={refetchUnRead} />
+      )}
       <Loading loading={loading} zIndex={999999} />
     </>
   );

projects/app/src/components/support/user/inform/ImportantInform.tsx

@@ -60,4 +60,4 @@ const ImportantInform = ({
   );
 };
 
-export default ImportantInform;
+export default React.memo(ImportantInform);

projects/app/src/components/support/user/inform/SystemMsgModal.tsx

@@ -6,7 +6,8 @@ import { Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next';
 import { LOGO_ICON } from '@fastgpt/global/common/system/constants';
 import { getSystemMsgModalData } from '@/web/support/user/inform/api';
-import Markdown from '@/components/Markdown';
+import dynamic from 'next/dynamic';
+const Markdown = dynamic(() => import('@/components/Markdown'), { ssr: false });
 
 const SystemMsgModal = ({}: {}) => {
   const { t } = useTranslation();

projects/app/src/pages/_app.tsx

@@ -1,103 +1,17 @@
-import { useEffect, useState } from 'react';
 import type { AppProps } from 'next/app';
 import Script from 'next/script';
 import Head from 'next/head';
-import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
 import Layout from '@/components/Layout';
-import { theme } from '@fastgpt/web/styles/theme';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import NProgress from 'nprogress'; //nprogress module
-import Router from 'next/router';
-import { clientInitData } from '@/web/common/system/staticData';
-import { appWithTranslation, useTranslation } from 'next-i18next';
-import { useRouter } from 'next/router';
-import { useSystemStore } from '@/web/common/system/useSystemStore';
-import type { FastGPTFeConfigsType } from '@fastgpt/global/common/system/types/index.d';
-import { change2DefaultLng, setLngStore } from '@/web/common/utils/i18n';
+import { appWithTranslation } from 'next-i18next';
+
+import QueryClientContext from '@/web/context/QueryClient';
+import ChakraUIContext from '@/web/context/ChakraUI';
+import { useInitApp } from '@/web/context/useInitApp';
 
-import 'nprogress/nprogress.css';
 import '@/web/styles/reset.scss';
 
-//Binding events.
-Router.events.on('routeChangeStart', () => NProgress.start());
-Router.events.on('routeChangeComplete', () => NProgress.done());
-Router.events.on('routeChangeError', () => NProgress.done());
-
-// Create a client
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      keepPreviousData: true,
-      refetchOnWindowFocus: false,
-      retry: false,
-      cacheTime: 10
-    }
-  }
-});
-
 function App({ Component, pageProps }: AppProps) {
-  const router = useRouter();
-  const { hiId } = router.query as { hiId?: string };
-  const { i18n } = useTranslation();
-  const { loadGitStar, setInitd, feConfigs } = useSystemStore();
-  const [scripts, setScripts] = useState<FastGPTFeConfigsType['scripts']>([]);
-  const [title, setTitle] = useState(process.env.SYSTEM_NAME || 'AI');
-
-  useEffect(() => {
-    // get init data
-    (async () => {
-      const {
-        feConfigs: { scripts, isPlus, show_git, systemTitle }
-      } = await clientInitData();
-
-      setTitle(systemTitle || 'FastGPT');
-
-      // log fastgpt
-      if (!isPlus) {
-        console.log(
-          '%cWelcome to FastGPT',
-          'font-family:Arial; color:#3370ff ; font-size:18px; font-weight:bold;',
-          `GitHub：https://github.com/labring/FastGPT`
-        );
-      }
-      if (show_git) {
-        loadGitStar();
-      }
-
-      setScripts(scripts || []);
-      setInitd();
-    })();
-
-    // add window error track
-    window.onerror = function (msg, url) {
-      window.umami?.track('windowError', {
-        device: {
-          userAgent: navigator.userAgent,
-          platform: navigator.platform,
-          appName: navigator.appName
-        },
-        msg,
-        url
-      });
-    };
-
-    return () => {
-      window.onerror = null;
-    };
-  }, []);
-
-  useEffect(() => {
-    // get default language
-    const targetLng = change2DefaultLng(i18n.language);
-    if (targetLng) {
-      setLngStore(targetLng);
-      router.replace(router.asPath, undefined, { locale: targetLng });
-    }
-  }, []);
-
-  useEffect(() => {
-    hiId && localStorage.setItem('inviterId', hiId);
-  }, [hiId]);
+  const { feConfigs, scripts, title } = useInitApp();
 
   return (
     <>
@@ -115,17 +29,15 @@ function App({ Component, pageProps }: AppProps) {
       </Head>
       {scripts?.map((item, i) => <Script key={i} strategy="lazyOnload" {...item}></Script>)}
 
-      <QueryClientProvider client={queryClient}>
-        <ChakraProvider theme={theme}>
-          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+      <QueryClientContext>
+        <ChakraUIContext>
           <Layout>
             <Component {...pageProps} />
           </Layout>
-        </ChakraProvider>
-      </QueryClientProvider>
+        </ChakraUIContext>
+      </QueryClientContext>
     </>
   );
 }
 
-// @ts-ignore
 export default appWithTranslation(App);

projects/app/src/pages/chat/components/Empty.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Card, Box, Flex } from '@chakra-ui/react';
 import { useMarkdown } from '@/web/common/hooks/useMarkdown';
-import Markdown from '@/components/Markdown';
-import Avatar from '@/components/Avatar';
+
+import dynamic from 'next/dynamic';
+const Markdown = dynamic(() => import('@/components/Markdown'));
+const Avatar = dynamic(() => import('@/components/Avatar'));
 
 const Empty = ({
   showChatProblem,

projects/app/src/pages/login/index.tsx

@@ -10,13 +10,13 @@ import LoginForm from './components/LoginForm/LoginForm';
 import dynamic from 'next/dynamic';
 import { serviceSideProps } from '@/web/common/utils/i18n';
 import { clearToken, setToken } from '@/web/support/user/auth';
-import CommunityModal from '@/components/CommunityModal';
 import Script from 'next/script';
 import Loading from '@fastgpt/web/components/common/MyLoading';
 
 const RegisterForm = dynamic(() => import('./components/RegisterForm'));
 const ForgetPasswordForm = dynamic(() => import('./components/ForgetPasswordForm'));
 const WechatForm = dynamic(() => import('./components/LoginForm/WechatForm'));
+const CommunityModal = dynamic(() => import('@/components/CommunityModal'));
 
 const Login = () => {
   const router = useRouter();

projects/app/src/web/context/ChakraUI.tsx

@@ -0,0 +1,22 @@
+import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
+import { theme } from '@fastgpt/web/styles/theme';
+import { Router } from 'next/router';
+import { ReactNode } from 'react';
+import NProgress from 'nprogress'; //nprogress module
+
+import 'nprogress/nprogress.css';
+
+Router.events.on('routeChangeStart', () => NProgress.start());
+Router.events.on('routeChangeComplete', () => NProgress.done());
+Router.events.on('routeChangeError', () => NProgress.done());
+
+export const ChakraUIContext = ({ children }: { children: ReactNode }) => {
+  return (
+    <ChakraProvider theme={theme}>
+      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
+      {children}
+    </ChakraProvider>
+  );
+};
+
+export default ChakraUIContext;

projects/app/src/web/context/QueryClient.tsx

@@ -0,0 +1,20 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactNode } from 'react';
+
+// Create a client
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      keepPreviousData: true,
+      refetchOnWindowFocus: false,
+      retry: false,
+      cacheTime: 10
+    }
+  }
+});
+
+const QueryClientContext = ({ children }: { children: ReactNode }) => {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
+
+export default QueryClientContext;

projects/app/src/web/context/useInitApp.ts

@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useState } from 'react';
+import { clientInitData } from '@/web/common/system/staticData';
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import { useSystemStore } from '@/web/common/system/useSystemStore';
+import type { FastGPTFeConfigsType } from '@fastgpt/global/common/system/types/index.d';
+import { change2DefaultLng, setLngStore } from '@/web/common/utils/i18n';
+
+export const useInitApp = () => {
+  const router = useRouter();
+  const { hiId } = router.query as { hiId?: string };
+  const { i18n } = useTranslation();
+  const { loadGitStar, setInitd, feConfigs } = useSystemStore();
+  const [scripts, setScripts] = useState<FastGPTFeConfigsType['scripts']>([]);
+  const [title, setTitle] = useState(process.env.SYSTEM_NAME || 'AI');
+
+  const initFetch = useCallback(async () => {
+    const {
+      feConfigs: { scripts, isPlus, show_git, systemTitle }
+    } = await clientInitData();
+
+    setTitle(systemTitle || 'FastGPT');
+
+    // log fastgpt
+    if (!isPlus) {
+      console.log(
+        '%cWelcome to FastGPT',
+        'font-family:Arial; color:#3370ff ; font-size:18px; font-weight:bold;',
+        `GitHub：https://github.com/labring/FastGPT`
+      );
+    }
+    if (show_git) {
+      loadGitStar();
+    }
+
+    setScripts(scripts || []);
+    setInitd();
+  }, [loadGitStar, setInitd]);
+
+  const initUserLanguage = useCallback(() => {
+    // get default language
+    const targetLng = change2DefaultLng(i18n.language);
+    if (targetLng) {
+      setLngStore(targetLng);
+      router.replace(router.asPath, undefined, { locale: targetLng });
+    }
+  }, []);
+
+  useEffect(() => {
+    initFetch();
+    initUserLanguage();
+
+    const errorTrack = (event: ErrorEvent) => {
+      window.umami?.track('windowError', {
+        device: {
+          userAgent: navigator.userAgent,
+          platform: navigator.platform,
+          appName: navigator.appName
+        },
+        error: event,
+        url: location.href
+      });
+    };
+    // add window error track
+    window.addEventListener('error', errorTrack);
+
+    return () => {
+      window.removeEventListener('error', errorTrack);
+    };
+  }, []);
+
+  useEffect(() => {
+    hiId && localStorage.setItem('inviterId', hiId);
+  }, [hiId]);
+
+  return {
+    feConfigs,
+    scripts,
+    title
+  };
+};