fix(bundler-webpack): externalize vue subpaths in ssr bundle (close #1718)

e2e/docs/imports/use-template-ref-1.md

@@ -0,0 +1,7 @@
+<div id="use-template-ref" ref="el">use-template-ref-1</div>
+
+<script setup>
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+</script>

e2e/docs/imports/use-template-ref-2.md

@@ -0,0 +1,7 @@
+<div id="use-template-ref" ref="el">use-template-ref-2</div>
+
+<script setup>
+import { useTemplateRef } from 'vue'
+
+const el = useTemplateRef('el')
+</script>

e2e/tests/imports/use-template-ref.spec.ts

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test'
+
+import { IS_PROD } from '../../utils/env'
+
+// pages using the same template ref key should all be rendered correctly,
+// which requires a single vue runtime in the server bundle
+for (const name of ['use-template-ref-1', 'use-template-ref-2']) {
+  test(`should render ${name} correctly`, async ({ page }) => {
+    await page.goto(`imports/${name}.html`)
+
+    await expect(page.locator('#use-template-ref')).toHaveText(name)
+
+    if (IS_PROD) {
+      expect(
+        await page.evaluate(
+          async (url) => fetch(url).then(async (res) => res.text()),
+          `./${name}.html`,
+        ),
+      ).toContain(`>${name}</div>`)
+    }
+  })
+}

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

@@ -33,7 +33,9 @@ export const createServerConfig = async (
   // set externals
   // externalize vue in ssr mode, because we need to import `'vue/server-renderer'` in node side
   // for ssr usage, then we also need vue as peer-dependency when using pnpm
-  config.externals(['vue'])
+  // subpaths like `'vue/server-renderer'` should also be externalized, otherwise
+  // a second vue runtime would be bundled into the server bundle
+  config.externals([/^vue($|\/)/])
 
   // devtool
   config.devtool('source-map')