fix(ssr): make import.meta.url be the filesystem URL (#5268)

vitejs · Oct 12, 2021 · 7674cf2 · 7674cf2
1 parent 386ca79
commit 7674cf2
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts b/packages/playground/ssr-vue/__tests__/ssr-vue.spec.ts
@@ -142,3 +142,8 @@ test('client navigation', async () => {
   editFile('src/pages/About.vue', (code) => code.replace('About', 'changed'))
   await untilUpdated(() => page.textContent('h1'), 'changed')
 })
+
+test('import.meta.url', async () => {
+  await page.goto(url)
+  expect(await page.textContent('.protocol')).toEqual('file:')
+})
diff --git a/packages/playground/ssr-vue/src/pages/Home.vue b/packages/playground/ssr-vue/src/pages/Home.vue
@@ -7,6 +7,8 @@
   <Foo />
   <p class="virtual">msg from virtual module: {{ foo.msg }}</p>
   <p class="inter">this will be styled with a font-face</p>
+  <p class="import-meta-url">{{ state.url }}</p>
+  <p class="protocol">{{ state.protocol }}</p>
 
   <ImportType />
 </template>
@@ -21,7 +23,13 @@ const Foo = defineAsyncComponent(() =>
 function load(file) {
   return defineAsyncComponent(() => import(`../components/${file}.vue`))
 }
-const state = reactive({ count: 0 })
+const url = import.meta.env.SSR ? import.meta.url : document.querySelector('.import-meta-url').textContent
+const protocol = new URL(url).protocol
+const state = reactive({
+  count: 0,
+  protocol,
+  url
+})
 </script>
 
 <style scoped>

diff --git a/packages/vite/src/node/ssr/ssrModuleLoader.ts b/packages/vite/src/node/ssr/ssrModuleLoader.ts
@@ -1,5 +1,6 @@
 import fs from 'fs'
 import path from 'path'
+import { pathToFileURL } from 'url'
 import { ViteDevServer } from '..'
 import { cleanUrl, resolveFrom, unwrapId } from '../utils'
 import { rebindErrorStacktrace, ssrRewriteStacktrace } from './ssrStacktrace'
@@ -80,7 +81,10 @@ async function instantiateModule(
   // referenced before it's been instantiated.
   mod.ssrModule = ssrModule
 
-  const ssrImportMeta = { url }
+  const ssrImportMeta = {
+    // The filesystem URL, matching native Node.js modules
+    url: pathToFileURL(mod.file!).toString(),
+  }
 
   urlStack = urlStack.concat(url)
   const isCircular = (url: string) => urlStack.includes(url)