fix(bundler-webpack): partially fix ssr dependencies issue

Author: meteorlxy

.vscode/launch.json

@@ -15,6 +15,18 @@
       "type": "node-terminal",
       "request": "launch",
       "command": "pnpm docs:build"
+    },
+    {
+      "name": "docs:dev (webpack)",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "DOCS_BUNDLER=webpack pnpm docs:dev"
+    },
+    {
+      "name": "docs:build (webpack)",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "DOCS_BUNDLER=webpack pnpm docs:build"
     }
   ]
 }

packages/bundler-webpack/src/build/build.ts

@@ -79,12 +79,8 @@ export const build = async (
     const clientManifest: ClientManifest = await fs.readJson(clientManifestPath)
 
     // resolve client files meta
-    const {
-      allFilesMeta,
-      initialFilesMeta,
-      asyncFilesMeta,
-      moduleFilesMetaMap,
-    } = resolveClientManifestMeta(clientManifest)
+    const { initialFilesMeta, asyncFilesMeta, moduleFilesMetaMap } =
+      resolveClientManifestMeta(clientManifest)
 
     // load the compiled server bundle
     const serverEntryPath = app.dir.temp('.server/app.cjs')
@@ -107,7 +103,6 @@ export const build = async (
         vueRouter,
         renderToString,
         ssrTemplate,
-        allFilesMeta,
         initialFilesMeta,
         asyncFilesMeta,
         moduleFilesMetaMap,

packages/bundler-webpack/src/build/renderPage.ts

@@ -31,7 +31,6 @@ export const renderPage = async ({
   vueRouter,
   renderToString,
   ssrTemplate,
-  allFilesMeta,
   initialFilesMeta,
   asyncFilesMeta,
   moduleFilesMetaMap,
@@ -42,7 +41,6 @@ export const renderPage = async ({
   vueRouter: Router
   renderToString: (input: VueApp, context: SSRContext) => Promise<string>
   ssrTemplate: string
-  allFilesMeta: FileMeta[]
   initialFilesMeta: FileMeta[]
   asyncFilesMeta: FileMeta[]
   moduleFilesMetaMap: ModuleFilesMetaMap

packages/bundler-webpack/src/build/ssr/createClientPlugin.ts

@@ -24,16 +24,14 @@ export const createClientPlugin = (
         'vuepress-client-plugin',
         async (compilation) => {
           // get webpack stats object
-          const stats: StatsToJsonOutput = compilation
-            .getStats()
-            .toJson() as unknown as StatsToJsonOutput
-
           const {
             assets = [],
             modules = [],
             entrypoints = {},
             chunks = [],
-          } = stats
+          }: StatsToJsonOutput = compilation
+            .getStats()
+            .toJson() as unknown as StatsToJsonOutput
 
           // get all files
           const allFiles = assets.map((a) => a.name)

packages/bundler-webpack/src/build/ssr/vuepressLoader.cts

@@ -12,15 +12,19 @@ module.exports = function vuepressLoader(source: string): string {
   // get `request` from loader context
   const { request } = this as any
 
+  if (!request.endsWith('.vue')) return source
+
   // add `request` to `ssrContext._registeredComponents` to handle SSR dependencies
+  // notice that this could only handle those sfc that cannot use inline template
+  // see https://github.com/vuejs/vue-loader/blob/1b1a195612f885a8dec3f371edf1cb8b35d341e4/src/index.ts#L167-L183
   return source.replace(
-    'script.ssrRender = ssrRender',
-    `\
+    /import { ssrRender } from (.*)\n/,
+    `import { ssrRender as _ssrRender } from $1
 import { ssrContextKey } from 'vue'
-script.ssrRender = (...args) => {
+const ssrRender = (...args) => {
   const ssrContext = args[2].appContext.provides[ssrContextKey]
   ssrContext._registeredComponents.add(${JSON.stringify(request)})
-  return ssrRender(...args)
+  return _ssrRender(...args)
 }
 `
   )