diff --git a/.changeset/kind-bees-admire.md b/.changeset/kind-bees-admire.md new file mode 100644 index 000000000000..7aa359f58bee --- /dev/null +++ b/.changeset/kind-bees-admire.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Fix mixed use of base + trailingSlash in Server Islands diff --git a/packages/astro/e2e/fixtures/server-islands/astro.config.mjs b/packages/astro/e2e/fixtures/server-islands/astro.config.mjs index 4bec97b9e1ad..2175a1bf8fe9 100644 --- a/packages/astro/e2e/fixtures/server-islands/astro.config.mjs +++ b/packages/astro/e2e/fixtures/server-islands/astro.config.mjs @@ -9,7 +9,7 @@ export default defineConfig({ output: 'hybrid', adapter: nodejs({ mode: 'standalone' }), integrations: [react(), mdx()], - trailingSlash: 'always', + trailingSlash: process.env.TRAILING_SLASH ?? 'always', experimental: { serverIslands: true, } diff --git a/packages/astro/e2e/server-islands.test.js b/packages/astro/e2e/server-islands.test.js index b37495b28812..2e68937b98e1 100644 --- a/packages/astro/e2e/server-islands.test.js +++ b/packages/astro/e2e/server-islands.test.js @@ -52,6 +52,26 @@ test.describe('Server islands', () => { }); }); + test.describe('Development - trailingSlash: ignore', () => { + let devServer; + + test.beforeAll(async ({ astro }) => { + process.env.TRAILING_SLASH = 'ignore'; + devServer = await astro.startDevServer(); + }); + + test.afterAll(async () => { + await devServer.stop(); + }); + + test('Load content from the server', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/base/')); + let el = page.locator('#island'); + + await expect(el, 'element rendered').toBeVisible(); + await expect(el, 'should have content').toHaveText('I am an island'); + }); + }); test.describe('Production', () => { let previewServer; diff --git a/packages/astro/src/runtime/server/render/server-islands.ts b/packages/astro/src/runtime/server/render/server-islands.ts index 58cce4e14814..153c01c6563d 100644 --- a/packages/astro/src/runtime/server/render/server-islands.ts +++ b/packages/astro/src/runtime/server/render/server-islands.ts @@ -64,7 +64,8 @@ export function renderServerIsland( const propsEncrypted = await encryptString(key, JSON.stringify(props)); const hostId = crypto.randomUUID(); - const serverIslandUrl = `${result.base}_server-islands/${componentId}${result.trailingSlash === 'always' ? '/' : ''}`; + const slash = result.base.endsWith('/') ? '' : '/'; + const serverIslandUrl = `${result.base}${slash}_server-islands/${componentId}${result.trailingSlash === 'always' ? '/' : ''}`; destination.write(`