---
title: Vite BASE_URL Slash Concatenation Bug
tags: [vite, frontend, build, paths, react]
source: daily/2026-05-10.md
created: 2026-05-10
---

# Vite BASE_URL Slash Concatenation Bug

## The Problem

Template-literal concatenation of `import.meta.env.BASE_URL` with a filename silently works in dev but breaks in production.

```ts
// BUG — works in dev, fails in prod
src={`${import.meta.env.BASE_URL}logo.png`}
```

**Why it hides in dev:** In dev mode `BASE_URL` is always `"/"`, so `"/logo.png"` is correct.  
**Why it breaks in prod:** When `base` is set to a sub-path (e.g. `/app/`), `BASE_URL` becomes `"/app/"` — still fine. But when `base: "./"` or `base: ""` is used, `BASE_URL` is `""` or `"./"`, yielding `"logo.png"` (no leading slash) or `"./logo.png"` relative path that resolves incorrectly depending on the page route.

## The Fix

Always include an explicit separator, or use `URL` constructor:

```ts
// Option 1 — explicit slash (safe when BASE_URL ends with /)
src={`${import.meta.env.BASE_URL}/logo.png`}

// Option 2 — URL constructor (safest, handles all BASE_URL forms)
src={new URL('logo.png', import.meta.env.BASE_URL).href}
```

## Real-World Case

Project `barclays-banner-builder` — logo `<img>` worked in Vite dev server but 404'd after deploy:

```ts
// Before (broken in prod)
src={`${import.meta.env.BASE_URL}copygen-barclays-logo.png`}

// After (fixed)
src={`${import.meta.env.BASE_URL}/copygen-barclays-logo.png`}
```

## Rule of Thumb

Never rely on `BASE_URL` being `"/"` in dev. Always test with `base: '/subpath/'` in `vite.config.ts` to surface path bugs before deploy.
