fix: islands runtime error

sanyuan0704 · Oct 5, 2022 · 785f6bd · 785f6bd
1 parent 517002d
commit 785f6bd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/node/build.ts b/src/node/build.ts
@@ -155,7 +155,7 @@ class SSGBuilder {
     return this.#baseBuild(false, {
       build: {
         minify: !process.env.NO_MINIFY,
-        outDir: TEMP_PATH,
+        outDir: join(this.#root, TEMP_PATH),
         ssrManifest: false,
         rollupOptions: {
           external: DEFAULT_EXTERNALS,
@@ -215,7 +215,7 @@ class SSGBuilder {
       this.#config.enableSpa!
     );
     const hasIsland = Object.keys(islandToPathMap).length > 0;
-    let injectIslandsCode = '';
+    let injectIslandsPath = '';
     // In island mode, we will bundle and inject island components code to html
     if (hasIsland && !this.#config.enableSpa) {
       const islandHash = createHash(JSON.stringify(islandToPathMap));
@@ -225,11 +225,16 @@ class SSGBuilder {
         const rawInjectCode = this.#generateIslandInjectCode(islandToPathMap);
         injectBundlePromise = (async () => {
           const injectBundle = await this.islandsBuild(rawInjectCode);
-          return injectBundle.output[0].code;
+          // Get complete css from server bundle
+          await copy(
+            join(this.#root, TEMP_PATH, 'assets'),
+            join(this.#root, DIST_PATH, 'assets')
+          );
+          return injectBundle.output[0].fileName;
         })();
         this.#islandsInjectCache.set(islandHash, injectBundlePromise);
       }
-      injectIslandsCode = await injectBundlePromise;
+      injectIslandsPath = await injectBundlePromise;
     }
     const { helmet } = helmetContext.context!;
 
@@ -286,7 +291,7 @@ class SSGBuilder {
         !this.#config.enableSpa && hasIsland
           ? `<script id="island-props">${JSON.stringify(
               propsData
-            )}</script><script type="module">${injectIslandsCode}</script>`
+            )}</script><script type="module" src="/${injectIslandsPath}"></script>`
           : ''
       }
       ${
@@ -354,7 +359,7 @@ class SSGBuilder {
         noExternal: ['lodash-es', 'react-router-dom']
       },
       build: {
-        minify: !process.env.NO_MINIFY,
+        minify: !process.env.NO_MINIFY && !isServer,
         ssr: isServer,
         outDir: isServer
           ? join(this.#root, TEMP_PATH, 'ssr')

diff --git a/src/theme-default/components/Nav/index.tsx b/src/theme-default/components/Nav/index.tsx
@@ -180,7 +180,7 @@ export function Nav() {
             items-center=""
           >
             <div className="search" flex="sm:1" pl="sm:8">
-              <Search />
+              <Search __island />
             </div>
             <NavMenu menuItems={menuItems} />
             {hasMultiLanguage && (

diff --git a/src/theme-default/components/Search/index.tsx b/src/theme-default/components/Search/index.tsx
@@ -1,6 +1,7 @@
 import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { MatchResultItem, PageSearcher } from '../../logic/search';
 import SearchSvg from './icons/search.svg';
+import { ComponentPropsWithIsland } from '../../../shared/types/index';
 
 function SuggestionContent(props: {
   suggestion: MatchResultItem;
@@ -61,7 +62,7 @@ function SuggestionContent(props: {
   );
 }
 
-export function Search() {
+export function Search(_props: ComponentPropsWithIsland) {
   const [suggestions, setSuggestions] = useState<MatchResultItem[]>([]);
   const [query, setQuery] = useState('');
   const [focused, setFocused] = useState(false);