From 7f2aaf137bf58a9cde108e2279f8ee515c04238e Mon Sep 17 00:00:00 2001 From: Vadym Samoilenko Date: Sun, 10 May 2026 22:17:40 +0100 Subject: [PATCH] wiki: auto-compile 2026-05-10 (1 log(s), 222 articles) --- wiki/_master-index.md | 2 +- wiki/concepts/_index.md | 1 + .../vite-base-url-slash-concatenation.md | 48 +++++++++++++++++++ wiki/log.md | 7 +++ 4 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 wiki/concepts/vite-base-url-slash-concatenation.md diff --git a/wiki/_master-index.md b/wiki/_master-index.md index fac2124..7beabd2 100644 --- a/wiki/_master-index.md +++ b/wiki/_master-index.md @@ -23,7 +23,7 @@ This 3-hop pattern works for hundreds of articles without vector search. | [[wiki/tech-patterns/_index\|tech-patterns/]] | Recurring tech stacks: FastAPI, React/Vite, Next.js, Azure AD, AI, Box, One2Edit, Redis/Celery, cost-tracker, OMG API | 28 | | [[wiki/architecture/_index\|architecture/]] | Cross-cutting architectural patterns: Docker Compose, multi-agent AI, GCP timeout, RAG, hotfolder, optical-dev deploy, cost-tracker, new-project checklist, troubleshooting playbooks, ADR log, Cloud Run Jobs | 11 | | [[wiki/client-knowledge/_index\|client-knowledge/]] | Per-client notes for Ford, H&M, L'Oréal, Barclays, Ferrero, 3M, BAIC | 7 | -| [[wiki/concepts/_index\|concepts/]] | Atomic knowledge extracted from Claude Code sessions | 165 | +| [[wiki/concepts/_index\|concepts/]] | Atomic knowledge extracted from Claude Code sessions | 166 | | [[wiki/connections/_index\|connections/]] | Cross-cutting insights linking 2+ concepts: FastAPI+Azure AD+Docker trinity, AI→cost-tracker, Apache+Vite basePath, GCP→REST polling, Box+hotfolder, Docker DNS+AdGuard, Celery prefork×faster_whisper memory stacking | 10 | | [[wiki/qa/_index\|qa/]] | Filed answers to queries (saved with `--file-back`) | 0 | | [[wiki/homelab/_index\|homelab/]] | Self-hosted infra: Proxmox install, IOMMU/PCI passthrough, hypervisor setup, budget builds, HP Elitedesk G3, Homarr API + Apps + Boards + Certificates + Integrations + Settings + Tasks + AdGuard + Clock + Docker Stats + Docker Integration + Download Client + Firewall + Proxmox Integration + Radarr + Readarr + Sonarr + Bookmarks + Calendar + Icons + App Widget + Weather + GitHub + Nextcloud + qBittorrent + RSS Feed + Speedtest Tracker + System Health Monitoring + System Resources + Services Map + Media Stack | 43 | diff --git a/wiki/concepts/_index.md b/wiki/concepts/_index.md index 57b810e..95a7135 100644 --- a/wiki/concepts/_index.md +++ b/wiki/concepts/_index.md @@ -214,5 +214,6 @@ | [[wiki/concepts/react-state-playwright-css-hover\|React useState Dropdown — CSS group-hover vs useState for Playwright]] | Playwright `hover()` on a trigger element does not reliably open a React dropdown that uses `useStat | daily/2026-05-10.md | 2026-05-10 | | [[wiki/concepts/overflow-hidden-clips-absolute-children\|overflow:hidden Clips Absolute/Fixed Children Regardless of z-index]] | `overflow: hidden` on a parent element **clips all descendant content at its boundary** — including | daily/2026-05-10.md | 2026-05-10 | | [[wiki/concepts/figma-fig-binary-format\|Figma .fig File — Proprietary Binary Format; Assets Extractable, Layout Data Not]] | `.fig` = ZIP with proprietary binary `canvas.fig` (magic bytes `fig-kiwij`); image assets extractable via `unzip`, but layer/component/text data requires Figma REST API or Desktop | daily/2026-05-10.md | 2026-05-10 | +| [[wiki/concepts/vite-base-url-slash-concatenation]] | `${BASE_URL}file.png` works in dev (BASE_URL="/") but breaks in prod — always use explicit slash or `new URL(file, BASE_URL).href` | daily/2026-05-10.md | 2026-05-10 | diff --git a/wiki/concepts/vite-base-url-slash-concatenation.md b/wiki/concepts/vite-base-url-slash-concatenation.md new file mode 100644 index 0000000..71e19f3 --- /dev/null +++ b/wiki/concepts/vite-base-url-slash-concatenation.md @@ -0,0 +1,48 @@ +--- +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 `` 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. diff --git a/wiki/log.md b/wiki/log.md index c7853b1..74562a9 100644 --- a/wiki/log.md +++ b/wiki/log.md @@ -1,6 +1,13 @@ # Build Log +## [2026-05-11T00:45:00+01:00] compile | daily/2026-05-10.md (addendum — Vite BASE_URL slash concatenation) +- Source: daily/2026-05-10.md +- Articles created: [[wiki/concepts/vite-base-url-slash-concatenation]] +- Articles updated: none +- Index updates: [[wiki/concepts/_index]] (165→166, +1 entry) +- Note: One concept missed in prior passes — session 16:19 barclays-banner-builder: `${BASE_URL}filename` silently works in dev (BASE_URL="/") but fails in prod when base is a sub-path or empty. Fix: always use explicit slash or `new URL(file, BASE_URL).href`. Now captured. + ## [2026-05-11T00:30:00+01:00] compile | daily/2026-05-10.md (addendum — Figma .fig binary format) - Source: daily/2026-05-10.md - Articles created: [[wiki/concepts/figma-fig-binary-format]]