Home / Function/ createViteLoader() — astro Function Reference

createViteLoader() — astro Function Reference

Architecture documentation for the createViteLoader() function in vite.ts from the astro codebase.

Entity Profile

Dependency Diagram

graph TD
  e03e470a_96fe_c361_01dd_010509919a56["createViteLoader()"]
  e07bffac_1f6f_11c8_8ec6_caf4bde2ee3d["vite.ts"]
  e03e470a_96fe_c361_01dd_010509919a56 -->|defined in| e07bffac_1f6f_11c8_8ec6_caf4bde2ee3d
  style e03e470a_96fe_c361_01dd_010509919a56 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/core/module-loader/vite.ts lines 11–120

export function createViteLoader(
	viteServer: vite.ViteDevServer,
	ssrEnvironment: RunnableDevEnvironment,
): ModuleLoader {
	const events = new EventEmitter() as ModuleLoaderEventEmitter;

	let isTsconfigUpdated = false;
	function isTsconfigUpdate(filePath: string) {
		const result = path.basename(filePath) === 'tsconfig.json';
		if (result) isTsconfigUpdated = true;
		return result;
	}

	// Skip event emit on tsconfig change as Vite restarts the server, and we don't
	// want to trigger unnecessary work that will be invalidated shortly.
	viteServer.watcher.on('add', (...args) => {
		if (!isTsconfigUpdate(args[0])) {
			events.emit('file-add', args);
		}
	});
	viteServer.watcher.on('unlink', (...args) => {
		if (!isTsconfigUpdate(args[0])) {
			events.emit('file-unlink', args);
		}
	});
	viteServer.watcher.on('change', (...args) => {
		if (!isTsconfigUpdate(args[0])) {
			events.emit('file-change', args);
		}
	});

	const _wsSend = viteServer.environments.client.hot.send;
	viteServer.environments.client.hot.send = function (...args: any) {
		// If the tsconfig changed, Vite will trigger a reload as it invalidates the module.
		// However in Astro, the whole server is restarted when the tsconfig changes. If we
		// do a restart and reload at the same time, the browser will refetch and the server
		// is not ready yet, causing a blank page. Here we block that reload from happening.
		if (isTsconfigUpdated) {
			isTsconfigUpdated = false;
			return;
		}
		const msg = args[0] as vite.HotPayload;
		if (msg?.type === 'error') {
			// If we have an error, but it didn't go through our error enhancement program, it means that it's a HMR error from
			// vite itself, which goes through a different path. We need to enhance it here.
			if (!(msg as any)['__isEnhancedAstroErrorPayload']) {
				const err = collectErrorMetadata(msg.err, pathToFileURL(viteServer.config.root));
				getViteErrorPayload(err).then((payload) => {
					events.emit('hmr-error', {
						type: 'error',
						err: {
							message: payload.err.message,
							stack: payload.err.stack,
						},
					});

					args[0] = payload;
					_wsSend.apply(this, args);
				});
				return;
			}
			events.emit('hmr-error', msg);
		}
		_wsSend.apply(this, args);
	};

	return {
		import(src) {
			return ssrEnvironment.runner.import(src);
		},
		async resolveId(spec, parent) {
			const ret = await ssrEnvironment.pluginContainer.resolveId(spec, parent);
			return ret?.id;
		},
		getModuleById(id) {
			return ssrEnvironment.moduleGraph.getModuleById(id);
		},
		getModulesByFile(file) {
			return ssrEnvironment.moduleGraph.getModulesByFile(file);
		},
		getModuleInfo(id) {

Domain

Subdomains

Frequently Asked Questions

What does createViteLoader() do?
createViteLoader() is a function in the astro codebase, defined in packages/astro/src/core/module-loader/vite.ts.
Where is createViteLoader() defined?
createViteLoader() is defined in packages/astro/src/core/module-loader/vite.ts at line 11.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free