fix(i18n): bypass server island with base (#13205)

* fix(i18n): bypass server island with base * Update packages/astro/src/core/routing/match.ts Co-authored-by: Florian Lefebvre <[email protected]> --------- Co-authored-by: Florian Lefebvre <[email protected]>
withastro · Feb 10, 2025 · 9d56602 · 9d56602
1 parent 7bc8256
commit 9d56602
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/.changeset/nice-poems-smoke.md b/.changeset/nice-poems-smoke.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fixes and issue where a server island component returns 404 when `base` is configured in i18n project.
diff --git a/packages/astro/src/core/routing/match.ts b/packages/astro/src/core/routing/match.ts
@@ -59,7 +59,8 @@ export function isRouteServerIsland(route: RouteData): boolean {
  */
 export function isRequestServerIsland(request: Request, base = ''): boolean {
 	const url = new URL(request.url);
-	const pathname = url.pathname.slice(base.length);
+	const pathname =
+		base === '/' ? url.pathname.slice(base.length) : url.pathname.slice(base.length + 1);
 
 	return pathname.startsWith(SERVER_ISLAND_BASE_PREFIX);
 }

diff --git a/packages/astro/test/i18n-routing.test.js b/packages/astro/test/i18n-routing.test.js
@@ -2194,3 +2194,30 @@ describe('i18n routing with server islands', () => {
 		assert.equal(serverIslandScript.length, 1, 'has the island script');
 	});
 });
+
+describe('i18n routing with server islands and base path', () => {
+	/** @type {import('./test-utils').Fixture} */
+	let fixture;
+	/** @type {import('./test-utils').DevServer} */
+	let devServer;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: './fixtures/i18n-server-island/',
+			base: '/custom',
+		});
+		devServer = await fixture.startDevServer();
+	});
+
+	after(async () => {
+		await devServer.stop();
+	});
+
+	it('should render the en locale with server island', async () => {
+		const res = await fixture.fetch('/custom/en/island');
+		const html = await res.text();
+		const $ = cheerio.load(html);
+		const serverIslandScript = $('script[data-island-id]');
+		assert.equal(serverIslandScript.length, 1, 'has the island script');
+	});
+});