Simulate Vite resolve id to url (#4239)

* Simulate Vite resolve id to url

* Add changeset

3 files changed, 27 insertions, 5 deletions

diff --git a/.changeset/nervous-socks-sin.md b/.changeset/nervous-socks-sin.md
new file mode 100644
index 000000000..3a7eb1187
--- /dev/null
+++ b/.changeset/nervous-socks-sin.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix Astro client scripts sourcemap 404
diff --git a/packages/astro/src/core/render/dev/index.ts b/packages/astro/src/core/render/dev/index.ts
index ff130d644..52c100460 100644
--- a/packages/astro/src/core/render/dev/index.ts
+++ b/packages/astro/src/core/render/dev/index.ts
@@ -1,4 +1,5 @@
 import { fileURLToPath } from 'url';
+import path from 'path';
 import type { ViteDevServer } from 'vite';
 import type {
 	AstroConfig,
@@ -12,7 +13,7 @@ import type {
 import { prependForwardSlash } from '../../../core/path.js';
 import { PAGE_SCRIPT_ID } from '../../../vite-plugin-scripts/index.js';
 import { LogOptions } from '../../logger/core.js';
-import { isPage } from '../../util.js';
+import { isPage, resolveIdToUrl } from '../../util.js';
 import { render as coreRender } from '../core.js';
 import { RouteCache } from '../route-cache.js';
 import { collectMdMetadata } from '../util.js';
@@ -116,7 +117,7 @@ export async function render(
 		scripts.add({
 			props: {
 				type: 'module',
-				src: '/@id/astro/runtime/client/hmr.js',
+				src: await resolveIdToUrl(viteServer, 'astro/runtime/client/hmr.js'),
 			},
 			children: '',
 		});
@@ -186,7 +187,7 @@ export async function render(
 			if (s.startsWith('/@fs')) {
 				return resolveClientDevPath(s);
 			}
-			return '/@id' + prependForwardSlash(s);
+			return await resolveIdToUrl(viteServer, s);
 		},
 		renderers,
 		request,
diff --git a/packages/astro/src/core/util.ts b/packages/astro/src/core/util.ts
index 084ffaf55..bcfa6aab4 100644
--- a/packages/astro/src/core/util.ts
+++ b/packages/astro/src/core/util.ts
@@ -4,9 +4,9 @@ import path from 'path';
 import resolve from 'resolve';
 import slash from 'slash';
 import { fileURLToPath, pathToFileURL } from 'url';
-import type { ErrorPayload } from 'vite';
+import type { ErrorPayload, ViteDevServer } from 'vite';
 import type { AstroConfig } from '../@types/astro';
-import { removeTrailingForwardSlash } from './path.js';
+import { prependForwardSlash, removeTrailingForwardSlash } from './path.js';
 
 // process.env.PACKAGE_VERSION is injected when we build and publish the astro package.
 export const ASTRO_VERSION = process.env.PACKAGE_VERSION ?? 'development';
@@ -207,3 +207,19 @@ export function getLocalAddress(serverAddress: string, host: string | boolean):
 		return serverAddress;
 	}
 }
+
+/**
+ * Simulate Vite's resolve and import analysis so we can import the id as an URL
+ * through a script tag or a dynamic import as-is.
+ */
+// NOTE: `/@id/` should only be used when the id is fully resolved
+export async function resolveIdToUrl(viteServer: ViteDevServer, id: string) {
+	const result = await viteServer.pluginContainer.resolveId(id);
+	if (!result) {
+		return VALID_ID_PREFIX + id;
+	}
+	if (path.isAbsolute(result.id)) {
+		return '/@fs' + prependForwardSlash(result.id);
+	}
+	return VALID_ID_PREFIX + result.id;
+}