Skip to content

fix(optimize-deps): hoist CJS interop assignment #22156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sapphi-red merged 4 commits into from
Apr 7, 2026
Merged

fix(optimize-deps): hoist CJS interop assignment #22156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9e69cf5
fix(optimize-deps): hoist CJS interop assignment
sapphi-red Apr 6, 2026
a772486
chore: update snapshot
sapphi-red Apr 6, 2026
4ddf29c
fix: hashbang
sapphi-red Apr 6, 2026
f0f2f5f
fix: hashbang
sapphi-red Apr 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 45 additions & 43 deletions packages/vite/src/node/__tests__/plugins/import.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@ describe('runTransform', () => {
isNodeMode,
config,
)
if (result !== undefined) {
expect(result.split('\n').length, 'result line count').toBe(
importExp.split('\n').length,
)
}
return result?.replaceAll(';', ';\n')
if (result === undefined) return undefined
const joined = result.hoistedAssignments
? `${result.hoistedAssignments}; ${result.importLine}`
: result.importLine
expect(joined.split('\n').length, 'result line count').toBe(
importExp.split('\n').length,
)
return joined.replaceAll(';', ';\n')
}

beforeEach(() => {
Expand All @@ -38,54 +40,54 @@ describe('runTransform', () => {
false,
),
).toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const useState = __vite__cjsImport0_react["useState"];
"const useState = __vite__cjsImport0_react["useState"];
const Component = __vite__cjsImport0_react["Component"];
const fake = __vite__cjsImport0_react["👋"]"
const fake = __vite__cjsImport0_react["👋"];
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
expect(
runTransformCjsImport(
'import { useState, Component, "👋" as fake } from "react"',
true,
),
).toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const useState = __vite__cjsImport0_react["useState"];
"const useState = __vite__cjsImport0_react["useState"];
const Component = __vite__cjsImport0_react["Component"];
const fake = __vite__cjsImport0_react["👋"]"
const fake = __vite__cjsImport0_react["👋"];
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
})

test('import default specifier', () => {
expect(runTransformCjsImport('import React from "react"', false))
.toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const React = !__vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react : __vite__cjsImport0_react.default"
"const React = !__vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react : __vite__cjsImport0_react.default;
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
expect(runTransformCjsImport('import React from "react"', true))
.toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const React = __vite__cjsImport0_react"
"const React = __vite__cjsImport0_react;
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)

expect(
runTransformCjsImport('import { default as React } from "react"', false),
).toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const React = !__vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react : __vite__cjsImport0_react.default"
"const React = !__vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react : __vite__cjsImport0_react.default;
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
})

test('import all specifier', () => {
expect(runTransformCjsImport('import * as react from "react"', false))
.toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const react = ((m, n) => n || !m?.__esModule ? { ...typeof m === "object" && !Array.isArray(m) || typeof m === "function" ? m : {}, default: m} : m)(__vite__cjsImport0_react, 0)"
"const react = ((m, n) => n || !m?.__esModule ? { ...typeof m === "object" && !Array.isArray(m) || typeof m === "function" ? m : {}, default: m} : m)(__vite__cjsImport0_react, 0);
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
expect(runTransformCjsImport('import * as react from "react"', true))
.toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const react = ((m, n) => n || !m?.__esModule ? { ...typeof m === "object" && !Array.isArray(m) || typeof m === "function" ? m : {}, default: m} : m)(__vite__cjsImport0_react, 1)"
"const react = ((m, n) => n || !m?.__esModule ? { ...typeof m === "object" && !Array.isArray(m) || typeof m === "function" ? m : {}, default: m} : m)(__vite__cjsImport0_react, 1);
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
})

Expand Down Expand Up @@ -115,23 +117,23 @@ describe('runTransform', () => {
false,
),
).toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const __vite__cjsExportI_useState = __vite__cjsImport0_react["useState"];
"const __vite__cjsExportI_useState = __vite__cjsImport0_react["useState"];
const __vite__cjsExportI_Component = __vite__cjsImport0_react["Component"];
const __vite__cjsExportL_1d0452e3 = __vite__cjsImport0_react["👋"];
export { __vite__cjsExportI_useState as useState, __vite__cjsExportI_Component as Component, __vite__cjsExportL_1d0452e3 as "👋" }"
export { __vite__cjsExportI_useState as useState, __vite__cjsExportI_Component as Component, __vite__cjsExportL_1d0452e3 as "👋" };
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
expect(
runTransformCjsImport(
'export { useState, Component, "👋" } from "react"',
true,
),
).toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const __vite__cjsExportI_useState = __vite__cjsImport0_react["useState"];
"const __vite__cjsExportI_useState = __vite__cjsImport0_react["useState"];
const __vite__cjsExportI_Component = __vite__cjsImport0_react["Component"];
const __vite__cjsExportL_1d0452e3 = __vite__cjsImport0_react["👋"];
export { __vite__cjsExportI_useState as useState, __vite__cjsExportI_Component as Component, __vite__cjsExportL_1d0452e3 as "👋" }"
export { __vite__cjsExportI_useState as useState, __vite__cjsExportI_Component as Component, __vite__cjsExportL_1d0452e3 as "👋" };
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)

expect(
Expand All @@ -140,34 +142,34 @@ describe('runTransform', () => {
false,
),
).toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const __vite__cjsExportI_useStateAlias = __vite__cjsImport0_react["useState"];
"const __vite__cjsExportI_useStateAlias = __vite__cjsImport0_react["useState"];
const __vite__cjsExportI_ComponentAlias = __vite__cjsImport0_react["Component"];
const __vite__cjsExportL_5d57d39e = __vite__cjsImport0_react["👋"];
export { __vite__cjsExportI_useStateAlias as useStateAlias, __vite__cjsExportI_ComponentAlias as ComponentAlias, __vite__cjsExportL_5d57d39e as "👍" }"
export { __vite__cjsExportI_useStateAlias as useStateAlias, __vite__cjsExportI_ComponentAlias as ComponentAlias, __vite__cjsExportL_5d57d39e as "👍" };
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
})

test('export default specifier', () => {
expect(runTransformCjsImport('export { default } from "react"', false))
.toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const __vite__cjsExportDefault_0 = !__vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react : __vite__cjsImport0_react.default;
export default __vite__cjsExportDefault_0"
"const __vite__cjsExportDefault_0 = !__vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react : __vite__cjsImport0_react.default;
export default __vite__cjsExportDefault_0;
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
expect(runTransformCjsImport('export { default } from "react"', true))
.toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const __vite__cjsExportDefault_0 = __vite__cjsImport0_react;
export default __vite__cjsExportDefault_0"
"const __vite__cjsExportDefault_0 = __vite__cjsImport0_react;
export default __vite__cjsExportDefault_0;
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)

expect(
runTransformCjsImport('export { default as React} from "react"', false),
).toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const __vite__cjsExportI_React = !__vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react : __vite__cjsImport0_react.default;
export { __vite__cjsExportI_React as React }"
"const __vite__cjsExportI_React = !__vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react : __vite__cjsImport0_react.default;
export { __vite__cjsExportI_React as React };
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)

expect(
Expand All @@ -176,9 +178,9 @@ describe('runTransform', () => {
false,
),
).toMatchInlineSnapshot(`
"import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js";
const __vite__cjsExportDefault_0 = __vite__cjsImport0_react["Component"];
export default __vite__cjsExportDefault_0"
"const __vite__cjsExportDefault_0 = __vite__cjsImport0_react["Component"];
export default __vite__cjsExportDefault_0;
import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js""
`)
})
})
25 changes: 18 additions & 7 deletions packages/vite/src/node/plugins/importAnalysis.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
createDebugger,
fsPathFromUrl,
generateCodeFrame,
getFileStartIndex,
getHash,
injectQuery,
isBuiltin,
Expand Down Expand Up @@ -964,9 +965,18 @@ export function interopNamedImports(
config,
)
if (rewritten) {
str.overwrite(expStart, expEnd, rewritten + getLineBreaks(exp), {
contentOnly: true,
})
str.overwrite(
expStart,
expEnd,
rewritten.importLine + getLineBreaks(exp),
{ contentOnly: true },
)
if (rewritten.hoistedAssignments) {
str.appendLeft(
getFileStartIndex(source),
rewritten.hoistedAssignments + ';',
)
}
} else {
// #1439 export * from '...'
str.overwrite(
Expand Down Expand Up @@ -1009,7 +1019,7 @@ export function transformCjsImport(
importer: string,
isNodeMode: boolean,
config: ResolvedConfig,
): string | undefined {
): { importLine: string; hoistedAssignments?: string } | undefined {
const node = parseAst(importExp).body[0]

// `export * from '...'` may cause unexpected problem, so give it a warning
Expand All @@ -1028,7 +1038,7 @@ export function transformCjsImport(
node.type === 'ExportNamedDeclaration'
) {
if (!node.specifiers.length) {
return `import "${url}"`
return { importLine: `import "${url}"` }
}

const importNames: ImportNameSpecifier[] = []
Expand Down Expand Up @@ -1076,7 +1086,8 @@ export function transformCjsImport(
const cjsModuleName = makeLegalIdentifier(
`__vite__cjsImport${importIndex}_${rawUrl}`,
)
const lines: string[] = [`import ${cjsModuleName} from "${url}"`]
const importLine = `import ${cjsModuleName} from "${url}"`
const lines: string[] = []
importNames.forEach(({ importedName, localName }) => {
if (importedName === '*') {
lines.push(
Expand All @@ -1101,7 +1112,7 @@ export function transformCjsImport(
lines.push(`export { ${exportNames.join(', ')} }`)
}

return lines.join('; ')
return { importLine, hoistedAssignments: lines.join('; ') }
}
}

Expand Down
6 changes: 2 additions & 4 deletions packages/vite/src/node/ssr/ssrTransform.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import type { TransformResult } from '../server/transformRequest'
import {
combineSourcemaps,
generateCodeFrame,
getFileStartIndex,
isDefined,
numberToPos,
} from '../utils'
Expand All @@ -29,8 +30,6 @@ export const ssrExportAllKey = `__vite_ssr_exportAll__`
export const ssrExportNameKey = `__vite_ssr_exportName__`
export const ssrImportMetaKey = `__vite_ssr_import_meta__`

const hashbangRE = /^#!.*\n/

export async function ssrTransform(
code: string,
inMap: SourceMap | { mappings: '' } | null,
Expand Down Expand Up @@ -92,8 +91,7 @@ async function ssrTransformScript(
const idToImportMap = new Map<string, string>()
const declaredConst = new Set<string>()

// hoist at the start of the file, after the hashbang
const fileStartIndex = hashbangRE.exec(code)?.[0].length ?? 0
const fileStartIndex = getFileStartIndex(code)
let hoistIndex = fileStartIndex

function defineImport(
Expand Down
7 changes: 7 additions & 0 deletions packages/vite/src/node/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1817,3 +1817,10 @@ export function formatAndTruncateFileList(files: string[]): {
}
return { formatted: log, truncated }
}

const hashbangRE = /^#!.*\n/

// find the start of the file, after the hashbang
export function getFileStartIndex(code: string): number {
return hashbangRE.exec(code)?.[0].length ?? 0
}
2 changes: 1 addition & 1 deletion playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ if (!isBuild) {
],
"version": 3,
},
visualization: "https://evanw.github.io/source-map-visualization/#MjQ4AC8vIHByZXR0aWVyLWlnbm9yZQppbXBvcnQgX192aXRlX19janNJbXBvcnQwX192aXRlanNfdGVzdEltcG9ydGVlUGtnIGZyb20gIi9ub2RlX21vZHVsZXMvLnZpdGUvZGVwcy9Adml0ZWpzX3Rlc3QtaW1wb3J0ZWUtcGtnLmpzP3Y9MDAwMDAwMDAiOyBjb25zdCBmb28gPSBfX3ZpdGVfX2Nqc0ltcG9ydDBfX3ZpdGVqc190ZXN0SW1wb3J0ZWVQa2dbImZvbyJdOwpjb25zb2xlLmxvZygid2l0aC1tdWx0aWxpbmUtaW1wb3J0IiwgZm9vKTsKMjQ4AHsibWFwcGluZ3MiOiI7QUFDQSxTQUNFLFdBQ0s7QUFFUCxRQUFRLElBQUkseUJBQXlCLElBQUkiLCJzb3VyY2VzIjpbIndpdGgtbXVsdGlsaW5lLWltcG9ydC50cyJdLCJ2ZXJzaW9uIjozLCJzb3VyY2VzQ29udGVudCI6WyIvLyBwcmV0dGllci1pZ25vcmVcbmltcG9ydCB7XG4gIGZvb1xufSBmcm9tICdAdml0ZWpzL3Rlc3QtaW1wb3J0ZWUtcGtnJ1xuXG5jb25zb2xlLmxvZygnd2l0aC1tdWx0aWxpbmUtaW1wb3J0JywgZm9vKVxuIl19"
visualization: "https://evanw.github.io/source-map-visualization/#MjQ3AGNvbnN0IGZvbyA9IF9fdml0ZV9fY2pzSW1wb3J0MF9fdml0ZWpzX3Rlc3RJbXBvcnRlZVBrZ1siZm9vIl07Ly8gcHJldHRpZXItaWdub3JlCmltcG9ydCBfX3ZpdGVfX2Nqc0ltcG9ydDBfX3ZpdGVqc190ZXN0SW1wb3J0ZWVQa2cgZnJvbSAiL25vZGVfbW9kdWxlcy8udml0ZS9kZXBzL0B2aXRlanNfdGVzdC1pbXBvcnRlZS1wa2cuanM/dj0wMDAwMDAwMCI7CmNvbnNvbGUubG9nKCJ3aXRoLW11bHRpbGluZS1pbXBvcnQiLCBmb28pOwoyNDgAeyJtYXBwaW5ncyI6IjtBQUNBLFNBQ0UsV0FDSztBQUVQLFFBQVEsSUFBSSx5QkFBeUIsSUFBSSIsInNvdXJjZXMiOlsid2l0aC1tdWx0aWxpbmUtaW1wb3J0LnRzIl0sInZlcnNpb24iOjMsInNvdXJjZXNDb250ZW50IjpbIi8vIHByZXR0aWVyLWlnbm9yZVxuaW1wb3J0IHtcbiAgZm9vXG59IGZyb20gJ0B2aXRlanMvdGVzdC1pbXBvcnRlZS1wa2cnXG5cbmNvbnNvbGUubG9nKCd3aXRoLW11bHRpbGluZS1pbXBvcnQnLCBmb28pXG4iXX0="
}
`)
})
Expand Down
Loading