fix: strip virtual module prefix from error messages (#10776)

.changeset/gorgeous-shrimps-bow.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: strip virtual module prefix from error messages

packages/kit/src/exports/vite/graph_analysis/index.js

@@ -1,7 +1,11 @@
 import path from 'node:path';
 import { posixify } from '../../../utils/filesystem.js';
+import { strip_virtual_prefix } from '../utils.js';
 
-const ILLEGAL_IMPORTS = new Set(['\0$env/dynamic/private', '\0$env/static/private']);
+const ILLEGAL_IMPORTS = new Set([
+	'\0virtual:$env/dynamic/private',
+	'\0virtual:$env/static/private'
+]);
 const ILLEGAL_MODULE_NAME_PATTERN = /.*\.server\..+/;
 
 /**
@@ -51,10 +55,14 @@ export function module_guard(context, { cwd, lib }) {
 				chain.map(({ id, dynamic }, i) => {
 					id = normalize_id(id, lib, cwd);
 
-					return `${' '.repeat(i * 2)}- ${id} ${dynamic ? 'dynamically imports' : 'imports'}\n`;
-				}) + `${' '.repeat(chain.length)}- ${id}`;
+					return `${' '.repeat(i * 2)}- ${strip_virtual_prefix(id)} ${
+						dynamic ? 'dynamically imports' : 'imports'
+					}\n`;
+				}) + `${' '.repeat(chain.length)}- ${strip_virtual_prefix(id)}`;
 
-			const message = `Cannot import ${id} into client-side code:\n${pyramid}`;
+			const message = `Cannot import ${strip_virtual_prefix(
+				id
+			)} into client-side code:\n${pyramid}`;
 
 			throw new Error(message);
 		}

packages/kit/src/exports/vite/graph_analysis/index.spec.js

@@ -44,12 +44,12 @@ test('throws an error when importing $env/static/private', () => {
 				importedIds: ['~/src/routes/+page.svelte']
 			},
 			'~/src/routes/+page.svelte': {
-				importedIds: ['\0$env/static/private']
+				importedIds: ['\0virtual:$env/static/private']
 			}
 		},
-		`Cannot import \0$env/static/private into client-side code:
+		`Cannot import $env/static/private into client-side code:
 		- src/routes/+page.svelte imports
-		 - \0$env/static/private`
+		 - $env/static/private`
 	);
 });
 
@@ -60,12 +60,12 @@ test('throws an error when dynamically importing $env/static/private', () => {
 				importedIds: ['~/src/routes/+page.svelte']
 			},
 			'~/src/routes/+page.svelte': {
-				dynamicallyImportedIds: ['\0$env/static/private']
+				dynamicallyImportedIds: ['\0virtual:$env/static/private']
 			}
 		},
-		`Cannot import \0$env/static/private into client-side code:
+		`Cannot import $env/static/private into client-side code:
 		- src/routes/+page.svelte dynamically imports
-		 - \0$env/static/private`
+		 - $env/static/private`
 	);
 });
 
@@ -76,12 +76,12 @@ test('throws an error when importing $env/dynamic/private', () => {
 				importedIds: ['~/src/routes/+page.svelte']
 			},
 			'~/src/routes/+page.svelte': {
-				importedIds: ['\0$env/dynamic/private']
+				importedIds: ['\0virtual:$env/dynamic/private']
 			}
 		},
-		`Cannot import \0$env/dynamic/private into client-side code:
+		`Cannot import $env/dynamic/private into client-side code:
 		- src/routes/+page.svelte imports
-		 - \0$env/dynamic/private`
+		 - $env/dynamic/private`
 	);
 });
 
@@ -92,12 +92,12 @@ test('throws an error when dynamically importing $env/dynamic/private', () => {
 				importedIds: ['~/src/routes/+page.svelte']
 			},
 			'~/src/routes/+page.svelte': {
-				dynamicallyImportedIds: ['\0$env/dynamic/private']
+				dynamicallyImportedIds: ['\0virtual:$env/dynamic/private']
 			}
 		},
-		`Cannot import \0$env/dynamic/private into client-side code:
+		`Cannot import $env/dynamic/private into client-side code:
 		- src/routes/+page.svelte dynamically imports
-		 - \0$env/dynamic/private`
+		 - $env/dynamic/private`
 	);
 });
 

packages/kit/src/exports/vite/index.js

@@ -18,7 +18,7 @@ import { assets_base, find_deps } from './build/utils.js';
 import { dev } from './dev/index.js';
 import { is_illegal, module_guard, normalize_id } from './graph_analysis/index.js';
 import { preview } from './preview/index.js';
-import { get_config_aliases, get_env } from './utils.js';
+import { get_config_aliases, get_env, strip_virtual_prefix } from './utils.js';
 import { write_client_manifest } from '../../core/sync/write_client_manifest.js';
 import prerender from '../../core/postbuild/prerender.js';
 import analyse from '../../core/postbuild/analyse.js';
@@ -336,7 +336,7 @@ function kit({ svelte_config }) {
 		async resolveId(id) {
 			// treat $env/static/[public|private] as virtual
 			if (id.startsWith('$env/') || id.startsWith('__sveltekit/') || id === '$service-worker') {
-				return `\0${id}`;
+				return `\0virtual:${id}`;
 			}
 		},
 
@@ -358,24 +358,24 @@ function kit({ svelte_config }) {
 					})
 				) {
 					const relative = normalize_id(id, normalized_lib, normalized_cwd);
-					throw new Error(`Cannot import ${relative} into client-side code`);
+					throw new Error(`Cannot import ${strip_virtual_prefix(relative)} into client-side code`);
 				}
 			}
 
 			switch (id) {
-				case '\0$env/static/private':
+				case '\0virtual:$env/static/private':
 					return create_static_module('$env/static/private', env.private);
 
-				case '\0$env/static/public':
+				case '\0virtual:$env/static/public':
 					return create_static_module('$env/static/public', env.public);
 
-				case '\0$env/dynamic/private':
+				case '\0virtual:$env/dynamic/private':
 					return create_dynamic_module(
 						'private',
 						vite_config_env.command === 'serve' ? env.private : undefined
 					);
 
-				case '\0$env/dynamic/public':
+				case '\0virtual:$env/dynamic/public':
 					// populate `$env/dynamic/public` from `window`
 					if (browser) {
 						return `export const env = ${global}.env;`;
@@ -386,12 +386,12 @@ function kit({ svelte_config }) {
 						vite_config_env.command === 'serve' ? env.public : undefined
 					);
 
-				case '\0$service-worker':
+				case '\0virtual:$service-worker':
 					return create_service_worker_module(svelte_config);
 
 				// for internal use only. it's published as $app/paths externally
 				// we use this alias so that we won't collide with user aliases
-				case '\0__sveltekit/paths': {
+				case '\0virtual:__sveltekit/paths': {
 					const { assets, base } = svelte_config.kit.paths;
 
 					// use the values defined in `global`, but fall back to hard-coded values
@@ -429,7 +429,7 @@ function kit({ svelte_config }) {
 					`;
 				}
 
-				case '\0__sveltekit/environment': {
+				case '\0virtual:__sveltekit/environment': {
 					const { version } = svelte_config.kit;
 
 					return dedent`

packages/kit/src/exports/vite/utils.js

@@ -97,3 +97,5 @@ export function not_found(req, res, base) {
 		);
 	}
 }
+
+export const strip_virtual_prefix = /** @param {string} id */ (id) => id.replace('\0virtual:', '');

packages/kit/test/apps/dev-only/test/test.js

@@ -11,7 +11,7 @@ test.describe.serial('Illegal imports', () => {
 			wait_for_started: false
 		});
 		expect(await page.textContent('.message-body')).toBe(
-			'Cannot import \0$env/dynamic/private into client-side code'
+			'Cannot import $env/dynamic/private into client-side code'
 		);
 	});
 
@@ -20,7 +20,7 @@ test.describe.serial('Illegal imports', () => {
 			wait_for_started: false
 		});
 		expect(await page.textContent('.message-body')).toBe(
-			'Cannot import \0$env/dynamic/private into client-side code'
+			'Cannot import $env/dynamic/private into client-side code'
 		);
 	});
 
@@ -29,7 +29,7 @@ test.describe.serial('Illegal imports', () => {
 			wait_for_started: false
 		});
 		expect(await page.textContent('.message-body')).toBe(
-			'Cannot import \0$env/static/private into client-side code'
+			'Cannot import $env/static/private into client-side code'
 		);
 	});
 
@@ -38,7 +38,7 @@ test.describe.serial('Illegal imports', () => {
 			wait_for_started: false
 		});
 		expect(await page.textContent('.message-body')).toBe(
-			'Cannot import \0$env/static/private into client-side code'
+			'Cannot import $env/static/private into client-side code'
 		);
 	});
 

packages/kit/test/build-errors/env.spec.js

@@ -10,7 +10,7 @@ test('$env/dynamic/private is not statically importable from the client', () =>
 				stdio: 'pipe',
 				timeout: 60000
 			}),
-		/.*Cannot import \0\$env\/dynamic\/private into client-side code:.*/gs
+		/.*Cannot import \$env\/dynamic\/private into client-side code:.*/gs
 	);
 });
 
@@ -22,7 +22,7 @@ test('$env/dynamic/private is not dynamically importable from the client', () =>
 				stdio: 'pipe',
 				timeout: 60000
 			}),
-		/.*Cannot import \0\$env\/dynamic\/private into client-side code:.*/gs
+		/.*Cannot import \$env\/dynamic\/private into client-side code:.*/gs
 	);
 });
 
@@ -34,7 +34,7 @@ test('$env/static/private is not statically importable from the client', () => {
 				stdio: 'pipe',
 				timeout: 60000
 			}),
-		/.*Cannot import \0\$env\/static\/private into client-side code:.*/gs
+		/.*Cannot import \$env\/static\/private into client-side code:.*/gs
 	);
 });
 
@@ -46,6 +46,6 @@ test('$env/static/private is not dynamically importable from the client', () =>
 				stdio: 'pipe',
 				timeout: 60000
 			}),
-		/.*Cannot import \0\$env\/static\/private into client-side code:.*/gs
+		/.*Cannot import \$env\/static\/private into client-side code:.*/gs
 	);
 });