feat(imports): support import attributes - fixes #14674

eslint.config.js

@@ -22,6 +22,8 @@ export default tseslint.config(
  '**/temp/**',
  '**/.vitepress/cache/**',
  '**/*.snap',
+ // eslint doesn't support import attributes
+ 'playground/resolve/import-attributes.js',
  ],
  },
  eslint.configs.recommended,

packages/vite/src/node/plugins/importAnalysis.ts

@@ -29,6 +29,7 @@ import {
 } from '../server/hmr'
 import {
  createDebugger,
+ evalValue,
  fsPathFromUrl,
  generateCodeFrame,
  injectQuery,
@@ -294,6 +295,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
  url: string,
  pos: number,
  forceSkipImportAnalysis: boolean = false,
+ attributes?: Record<string, string>,
  ): Promise<[string, string]> => {
  url = stripBase(url, base)
 
@@ -317,7 +319,7 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
  }
  }
 
- const resolved = await this.resolve(url, importerFile)
+ const resolved = await this.resolve(url, importerFile, { attributes })
 
  if (!resolved || resolved.meta?.['vite:alias']?.noResolved) {
  // in ssr, we should let node handle the missing modules
@@ -491,8 +493,13 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
 
  const isDynamicImport = dynamicIndex > -1
 
- // strip import attributes as we can process them ourselves
+ // Grab the import attributes
+ let importAttributes: Record<string, any> | undefined = undefined
  if (!isDynamicImport && attributeIndex > -1) {
+ const raw = source.substring(attributeIndex, expEnd)
+ importAttributes = evalValue<{}>(raw)
+
+ // strip import attributes as we can process them ourselves
  str().remove(end + 1, expEnd)
  }
 
@@ -538,7 +545,12 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
  }
 
  // normalize
- const [url, resolvedId] = await normalizeUrl(specifier, start)
+ const [url, resolvedId] = await normalizeUrl(
+ specifier,
+ start,
+ undefined,
+ importAttributes,
+ )
 
  // record as safe modules
  // safeModulesPath should not include the base prefix.

packages/vite/src/node/plugins/importAnalysisBuild.ts

@@ -304,20 +304,13 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
  for (let index = 0; index < imports.length; index++) {
  const {
  s: start,
- e: end,
  ss: expStart,
  se: expEnd,
  d: dynamicIndex,
- a: attributeIndex,
  } = imports[index]
 
  const isDynamicImport = dynamicIndex > -1
 
- // strip import attributes as we can process them ourselves
- if (!isDynamicImport && attributeIndex > -1) {
- str().remove(end + 1, expEnd)
- }
-
  if (
  isDynamicImport &&
  insertPreload &&

playground/resolve/__tests__/resolve.spec.ts

@@ -209,6 +209,10 @@ test('Resolving from other package with imports field', async () => {
  expect(await page.textContent('.imports-pkg-slash')).toMatch('[success]')
 })
 
+test('Resolving import attributes', async () => {
+ expect(await page.textContent('.import-attributes')).toMatch('[success]')
+})
+
 test('Resolving with query with imports field', async () => {
  // since it is imported with `?url` it should return a URL
  expect(await page.textContent('.imports-query')).toMatch(

playground/resolve/import-attributes.js

@@ -0,0 +1,3 @@
+import { msg as importAttributes } from '@virtual-file-import-attributes' with { foo: 'bar', baz: 'qux' }
+
+export const msg = importAttributes

playground/resolve/index.html

@@ -173,6 +173,9 @@ <h2>resolve package that contains # in path</h2>
 <h2>resolve non normalized absolute path</h2>
 <p class="non-normalized"></p>
 
+<h2>Resolving import attributes</h2>
+<p class="import-attributes">fail</p>
+
 <script type="module">
  import '@generated-content-virtual-file'
  function text(selector, text) {
@@ -396,6 +399,9 @@ <h2>resolve non normalized absolute path</h2>
 
  import nonNormalizedAbsolute from '@non-normalized'
  text('.non-normalized', nonNormalizedAbsolute)
+
+ import { msg as importAttributes } from './import-attributes'
+ text('.import-attributes', importAttributes)
 </script>
 
 <style>

playground/resolve/vite.config.js

@@ -10,6 +10,10 @@ const virtualId9036 = '\0' + virtualFile9036
 
 const customVirtualFile = '@custom-virtual-file'
 
+const virtualFileImportAttributes = '@virtual-file-import-attributes'
+const virtualIdImportAttributes = '\0' + virtualFileImportAttributes
+let importAttributes = {}
+
 const generatedContentVirtualFile = '@generated-content-virtual-file'
 const generatedContentImports = [
  {
@@ -106,6 +110,27 @@ export default defineConfig({
  return this.resolve(__dirname + '//non-normalized')
  },
  },
+ {
+ name: 'import-attributes',
+ resolveId(id, _, options) {
+ if (id === virtualFileImportAttributes) {
+ importAttributes = options.attributes
+ return virtualIdImportAttributes
+ }
+ },
+ load(id) {
+ if (id === virtualIdImportAttributes) {
+ if (
+ importAttributes.foo === 'bar' &&
+ importAttributes.baz === 'qux'
+ ) {
+ return `export const msg = "[success] from virtual import attribute"`
+ } else {
+ return `export const msg = "fail"`
+ }
+ }
+ },
+ },
  ],
  optimizeDeps: {
  include: [