Vite Automatically Appends Extensions to Imports – How Does It Work?

[centraldogma99]

Hello,

I am currently working on a React project using Vite. When importing modules, I usually omit the file extensions, like import { Some } from '#libs/some' and worked with no problem. However, I recently discovered that Vite(More specifically, vite:import-analysis) was automatically adding extensions to import statements, But couldn’t find any specific documentation about this behavior in the Vite official docs.

So far, I suspect that Rollup might be handling this behind the scenes, but I’m not entirely sure. Could you point me to any documentation or source code that explains how this automatic extension addition works?

[hi-ogawa]

Technically it's not only "Automatically Appends Extensions", but that's what normally called "resolution", which includes looking up node_modules, handling # alias, etc..

What you seeing in the diff is showing this plugin's transform, so you can follow this:

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

Lines 255 to 257 in ba56cf4

	name: 'vite:import-analysis',
	async transform(source, importer) {

The basic steps can be probably summarized in these three steps, 1: parse imports, 2: resolve imports, 3: replace imports

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

Line 273 in ba56cf4

;[imports, exports] = parseImports(source)

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

Line 349 in ba56cf4

const resolved = await this.resolve(url, importerFile)

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

Line 614 in ba56cf4

str().overwrite(s, e, rewrittenUrl, {