fix: import.meta.env.BASE_URL will be '/' in client loaded component …

…on dev mode (#4886)

.changeset/four-suns-happen.md

@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix: import.meta.env.BASE_URL will be '/' in client loaded component on dev mode

packages/astro/e2e/astro-envs.test.js

@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import { testFactory } from './test-utils.js';
+
+const test = testFactory({ root: './fixtures/astro-envs/' });
+
+let devServer;
+
+test.beforeAll(async ({ astro }) => {
+ devServer = await astro.startDevServer();
+});
+
+test.afterAll(async () => {
+ await devServer.stop();
+});
+
+test.describe('Astro Environment BASE_URL', () => {
+ test('BASE_URL', async ({ page, astro }) => {
+ await page.goto(astro.resolveUrl('/blog/'));
+
+ const astroBaseUrl = page.locator('id=astro-base-url');
+ await expect(astroBaseUrl, 'astroBaseUrl equals to /blog/').toHaveText('/blog/')
+
+ const clientComponentBaseUrl = page.locator('id=client-component-base-url');
+ await expect(clientComponentBaseUrl, 'clientComponentBaseUrl equals to /blog').toHaveText('/blog/')
+ });
+});

packages/astro/e2e/fixtures/astro-envs/.gitignore

@@ -0,0 +1 @@
+!.env

packages/astro/e2e/fixtures/astro-envs/astro.config.mjs

@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config';
+import vue from '@astrojs/vue';
+
+// https://astro.build/config
+export default defineConfig({
+ site: 'https://example.com',
+ base: '/blog',
+ integrations: [vue()],
+});

packages/astro/e2e/fixtures/astro-envs/package.json

@@ -0,0 +1,9 @@
+{
+ "name": "@test/astro-envs",
+ "version": "0.0.0",
+ "private": true,
+ "dependencies": {
+ "@astrojs/vue": "workspace:*",
+ "astro": "workspace:*"
+ }
+}

packages/astro/e2e/fixtures/astro-envs/src/components/Client.vue

@@ -0,0 +1,13 @@
+<template>
+ <div id="client-component-base-url">{{ BASE_URL }}</div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ BASE_URL: import.meta.env.BASE_URL,
+ };
+ },
+};
+</script>

packages/astro/e2e/fixtures/astro-envs/src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import Client from '../components/Client.vue';
+
+const {BASE_URL} = import.meta.env
+---
+
+<div id="astro-base-url">{BASE_URL}</div>
+<Client client:load />

packages/astro/src/core/dev/index.ts

@@ -52,6 +52,9 @@ export default async function dev(
  optimizeDeps: {
  include: rendererClientEntries,
  },
+ define: {
+ 'import.meta.env.BASE_URL': settings.config.base ? `'${settings.config.base}'` : 'undefined',
+ },
  },
  { settings, logging: options.logging, mode: 'dev' }
  );