From 7b7ee70d2c045d09e9a771604c06facd0e0d1504 Mon Sep 17 00:00:00 2001
From: kj <kj@stackblitz.com>
Date: Sat, 18 Jul 2026 16:29:02 -0500
Subject: [PATCH 1/2] feat(bolt-vite-react-ts): add @/ path alias for src

Configure a depth-invariant @/* -> src/* alias in both tsconfig.app.json
(paths + baseUrl) and vite.config.ts (resolve.alias) so cross-module
imports can be written @/services/foo instead of ../../services/foo.
Removes the miscounted-relative-depth import errors that agents hit on
deep folder layouts.
---
 bolt-vite-react-ts/tsconfig.app.json | 6 ++++++
 bolt-vite-react-ts/vite.config.ts    | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/bolt-vite-react-ts/tsconfig.app.json b/bolt-vite-react-ts/tsconfig.app.json
index c15dbd60..e75b2210 100644
--- a/bolt-vite-react-ts/tsconfig.app.json
+++ b/bolt-vite-react-ts/tsconfig.app.json
@@ -14,6 +14,12 @@
     "noEmit": true,
     "jsx": "react-jsx",
 
+    /* Path alias — depth-invariant imports for src (@/foo === src/foo from any file) */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
     /* Linting */
     "strict": true,
     "noUnusedLocals": false,
diff --git a/bolt-vite-react-ts/vite.config.ts b/bolt-vite-react-ts/vite.config.ts
index 147380af..13cb6a9f 100644
--- a/bolt-vite-react-ts/vite.config.ts
+++ b/bolt-vite-react-ts/vite.config.ts
@@ -1,9 +1,15 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { fileURLToPath, URL } from 'node:url';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
   optimizeDeps: {
     exclude: ['lucide-react'],
   },

From 066e66ad23ccbe2971927a4d9a8fdcd180dd5c76 Mon Sep 17 00:00:00 2001
From: kj <kjkrause97@gmail.com>
Date: Mon, 20 Jul 2026 09:00:15 -0500
Subject: [PATCH 2/2] feat(bolt-vite-react-ts): steer imports to the @/ alias
 via template prompt

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 bolt-vite-react-ts/.bolt/prompt | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/bolt-vite-react-ts/.bolt/prompt b/bolt-vite-react-ts/.bolt/prompt
index ce91b434..25a4e692 100644
--- a/bolt-vite-react-ts/.bolt/prompt
+++ b/bolt-vite-react-ts/.bolt/prompt
@@ -3,3 +3,5 @@ For all designs I ask you to make, have them be beautiful, not cookie cutter. Ma
 By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
 
 Use icons from lucide-react for logos.
+
+Import project modules with the `@/` path alias (`@/components/Foo`, maps to `src/`) instead of deep relative paths like `../../components/Foo`.