fix(ssr): crash on circular import

packages/vite/src/node/ssr/__tests__/ssrTransform.spec.ts

@@ -104,9 +104,9 @@ test('export * from', async () => {
   ).toMatchInlineSnapshot(`
     "const __vite_ssr_import_0__ = await __vite_ssr_import__(\\"vue\\");
     __vite_ssr_exportAll__(__vite_ssr_import_0__);
+
     const __vite_ssr_import_1__ = await __vite_ssr_import__(\\"react\\");
     __vite_ssr_exportAll__(__vite_ssr_import_1__);
-
     "
   `)
 })
@@ -940,9 +940,10 @@ test('import assertion attribute', async () => {
   import('./bar.json', { assert: { type: 'json' } });
   `),
   ).toMatchInlineSnapshot(`
-  "const __vite_ssr_import_0__ = await __vite_ssr_import__(\\"./foo.json\\");
-
-
-    __vite_ssr_dynamic_import__('./bar.json', { assert: { type: 'json' } });
-    "`)
+    "const __vite_ssr_import_0__ = await __vite_ssr_import__(\\"./foo.json\\");
+
+
+      __vite_ssr_dynamic_import__('./bar.json', { assert: { type: 'json' } });
+      "
+  `)
 })

packages/vite/src/node/ssr/ssrTransform.ts

@@ -98,13 +98,11 @@ async function ssrTransformScript(
   // hoist at the start of the file, after the hashbang
   const hoistIndex = code.match(hashbangRE)?.[0].length ?? 0
 
-  function defineImport(source: string) {
+  function defineImport(index = 0, source: string) {
     deps.add(source)
     const importId = `__vite_ssr_import_${uid++}__`
-    // There will be an error if the module is called before it is imported,
-    // so the module import statement is hoisted to the top
     s.appendLeft(
-      hoistIndex,
+      index,
       `const ${importId} = await ${ssrImportKey}(${JSON.stringify(source)});\n`,
     )
     return importId
@@ -124,7 +122,7 @@ async function ssrTransformScript(
     // import { baz } from 'foo' --> baz -> __import_foo__.baz
     // import * as ok from 'foo' --> ok -> __import_foo__
     if (node.type === 'ImportDeclaration') {
-      const importId = defineImport(node.source.value as string)
+      const importId = defineImport(hoistIndex, node.source.value as string)
       s.remove(node.start, node.end)
       for (const spec of node.specifiers) {
         if (spec.type === 'ImportSpecifier') {
@@ -167,11 +165,10 @@ async function ssrTransformScript(
         s.remove(node.start, node.end)
         if (node.source) {
           // export { foo, bar } from './foo'
-          const importId = defineImport(node.source.value as string)
-          // hoist re-exports near the defined import so they are immediately exported
+          const importId = defineImport(node.start, node.source.value as string)
           for (const spec of node.specifiers) {
             defineExport(
-              hoistIndex,
+              node.start,
               spec.exported.name,
               `${importId}.${spec.local.name}`,
             )
@@ -217,12 +214,11 @@ async function ssrTransformScript(
     // export * from './foo'
     if (node.type === 'ExportAllDeclaration') {
       s.remove(node.start, node.end)
-      const importId = defineImport(node.source.value as string)
-      // hoist re-exports near the defined import so they are immediately exported
+      const importId = defineImport(node.start, node.source.value as string)
       if (node.exported) {
-        defineExport(hoistIndex, node.exported.name, `${importId}`)
+        defineExport(node.start, node.exported.name, `${importId}`)
       } else {
-        s.appendLeft(hoistIndex, `${ssrExportAllKey}(${importId});\n`)
+        s.appendLeft(node.start, `${ssrExportAllKey}(${importId});\n`)
       }
     }
   }

playground/ssr/__tests__/ssr.spec.ts

@@ -12,6 +12,14 @@ test(`circular dependencies modules doesn't throw`, async () => {
   )
 })
 
+test(`circular import doesn't throw`, async () => {
+  await page.goto(`${url}/circular-import`)
+
+  expect(await page.textContent('.circ-import')).toMatchInlineSnapshot(
+    '"A is: __A__"',
+  )
+})
+
 test(`deadlock doesn't happen`, async () => {
   await page.goto(`${url}/forked-deadlock`)
 

playground/ssr/src/app.js

@@ -3,6 +3,7 @@ import { escapeHtml } from './utils'
 const pathRenderers = {
   '/': renderRoot,
   '/circular-dep': renderCircularDep,
+  '/circular-import': renderCircularImport,
   '/forked-deadlock': renderForkedDeadlock,
 }
 
@@ -34,6 +35,11 @@ async function renderCircularDep(rootDir) {
   return `<div class="circ-dep-init">${escapeHtml(getValueAB())}</div>`
 }
 
+async function renderCircularImport(rootDir) {
+  const { logA } = await import('./circular-import/index.js')
+  return `<div class="circ-import">${escapeHtml(logA())}</div>`
+}
+
 async function renderForkedDeadlock(rootDir) {
   const { commonModuleExport } = await import('./forked-deadlock/common-module')
   commonModuleExport()

playground/ssr/src/circular-import/a.js

@@ -0,0 +1,5 @@
+import { getB } from './b'
+
+export const A = '__A__'
+
+export const B = getB()

playground/ssr/src/circular-import/b.js

@@ -0,0 +1,5 @@
+export function getB() {
+  return '__B__'
+}
+
+export { A } from './a'

playground/ssr/src/circular-import/index.js

@@ -0,0 +1,5 @@
+import { A } from './b'
+
+export function logA() {
+  return `A is: ${A}`
+}