fix(ssr): crash on circular import (#14441)

Author: Dunqing

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__);
-
  "
  `)
 })
@@ -964,14 +964,14 @@ console.log(foo + 2)
  `),
 ).toMatchInlineSnapshot(`
  "const __vite_ssr_import_0__ = await __vite_ssr_import__("./foo", {"importedNames":["foo"]});
- const __vite_ssr_import_1__ = await __vite_ssr_import__("./a");
- __vite_ssr_exportAll__(__vite_ssr_import_1__);
- const __vite_ssr_import_2__ = await __vite_ssr_import__("./b");
- __vite_ssr_exportAll__(__vite_ssr_import_2__);
 
  console.log(__vite_ssr_import_0__.foo + 1)
+ const __vite_ssr_import_1__ = await __vite_ssr_import__("./a");
+ __vite_ssr_exportAll__(__vite_ssr_import_1__);
 
 
+ const __vite_ssr_import_2__ = await __vite_ssr_import__("./b");
+ __vite_ssr_exportAll__(__vite_ssr_import_2__);
 
  console.log(__vite_ssr_import_0__.foo + 2)
  "

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

@@ -94,7 +94,11 @@ async function ssrTransformScript(
 // hoist at the start of the file, after the hashbang
 consthoistIndex=code.match(hashbangRE)?.[0].length??0
 
-functiondefineImport(source: string,metadata?: DefineImportMetadata){
+functiondefineImport(
+index: number,
+source: string,
+metadata?: DefineImportMetadata,
+){
 deps.add(source)
 constimportId=`__vite_ssr_import_${uid++}__`
 
@@ -110,7 +114,7 @@ async function ssrTransformScript(
 // 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,
 )}${metadataStr});\n`,
@@ -132,7 +136,7 @@ async function ssrTransformScript(
 // import { baz } from 'foo' --> baz -> __import_foo__.baz
 // import * as ok from 'foo' --> ok -> __import_foo__
 if(node.type==='ImportDeclaration'){
-constimportId=defineImport(node.source.valueasstring,{
+constimportId=defineImport(hoistIndex,node.source.valueasstring,{
 importedNames: node.specifiers
 .map((s)=>{
 if(s.type==='ImportSpecifier')returns.imported.name
@@ -182,13 +186,16 @@ async function ssrTransformScript(
 s.remove(node.start,node.end)
 if(node.source){
 // export { foo, bar } from './foo'
-constimportId=defineImport(node.source.valueasstring,{
-importedNames: node.specifiers.map((s)=>s.local.name),
-})
-// hoist re-exports near the defined import so they are immediately exported
+constimportId=defineImport(
+node.start,
+node.source.valueasstring,
+{
+importedNames: node.specifiers.map((s)=>s.local.name),
+},
+)
 for(constspecofnode.specifiers){
 defineExport(
-hoistIndex,
+node.start,
 spec.exported.name,
 `${importId}.${spec.local.name}`,
 )
@@ -234,12 +241,11 @@ async function ssrTransformScript(
 // export * from './foo'
 if(node.type==='ExportAllDeclaration'){
 s.remove(node.start,node.end)
-constimportId=defineImport(node.source.valueasstring)
-// hoist re-exports near the defined import so they are immediately exported
+constimportId=defineImport(node.start,node.source.valueasstring)
 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()=>{
+awaitpage.goto(`${url}/circular-import`)
+
+expect(awaitpage.textContent('.circ-import')).toMatchInlineSnapshot(
+'"A is: __A__"',
+)
+})
+
 test(`deadlock doesn't happen`,async()=>{
 awaitpage.goto(`${url}/forked-deadlock`)
 

playground/ssr/src/app.js

@@ -3,6 +3,7 @@ import { escapeHtml } from './utils'
 constpathRenderers={
 '/': 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>`
 }
 
+asyncfunctionrenderCircularImport(rootDir){
+const{ logA }=awaitimport('./circular-import/index.js')
+return`<div class="circ-import">${escapeHtml(logA())}</div>`
+}
+
 asyncfunctionrenderForkedDeadlock(rootDir){
 const{ commonModuleExport }=awaitimport('./forked-deadlock/common-module')
 commonModuleExport()

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

@@ -0,0 +1,5 @@
+import{getB}from'./b'
+
+exportconstA='__A__'
+
+exportconstB=getB()

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

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

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

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