TS Path Alias Fix

1 import { db, storage } from '@/firebase'
~~~~~~~~~~~~

Found 2 errors.

ERROR: "type-check" exited with 2.

TS2307: Cannot find module '@/firebase' or its corresponding type declarations.

means TypeScript doesn't recognize the alias `@/firebase`, likely because your `tsconfig.json` (or `vite.config.ts` if using Vite) doesn't define this path alias properly.

### ✅ Solution Steps

#### 1. **Ensure path alias is configured in `tsconfig.json`**
Make sure you have something like this in your `tsconfig.json`:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

#### 2. **Ensure Vite is aware of the alias**
In `vite.config.ts`, add the alias under `resolve.alias`:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

#### 3. **Restart your dev server and IDE**
Sometimes changes to `tsconfig.json` or `vite.config.ts` aren't picked up until you restart your development server **and** your IDE (e.g., VS Code).

#### 4. **Check folder structure**
Ensure that `src/firebase/index.ts` or `src/firebase.ts` exists (whichever matches your import) and properly exports `db` and `storage`:

// src/firebase/index.ts
import { getFirestore } from 'firebase/firestore'
import { getStorage } from 'firebase/storage'
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  // your config here
}

const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
const storage = getStorage(app)

export { db, storage }

Let me know your actual folder structure if this doesn’t resolve it.

}
tsconfig file

You should check and **add the alias setup in the actual `tsconfig.app.json`** (or whatever file compiles your app source).

—

### ✅ Fix Instructions

#### 1. **Update `tsconfig.app.json`**
Open your `tsconfig.app.json` and ensure it contains:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}

> This tells TypeScript that `@/firebase` means `src/firebase`.

—

#### 2. **(Optional) Update `vite.config.ts`**
If not already present, make sure your `vite.config.ts` includes the alias too:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

—

#### 3. **Restart dev tools**
– Restart Vite dev server
– Reload your editor (like VS Code) to pick up path alias changes

—

Let me know if you want me to check your `tsconfig.app.json` — just paste it here.

"paths": {
"@/*": ["./src/*"]
}
}
}

—

### ✅ Final Fix: Add `baseUrl`
Update your `tsconfig.app.json` like this:

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

—

### 🔁 After Updating:
1. **Restart your Vite dev server**
2. **Reload VS Code or your IDE**
3. Verify that the file `src/firebase/index.ts` exists (or whatever your `@/firebase` is pointing to).

—

Let me know if you want to check the structure of your `src/firebase` folder or test the actual import.

1 import { db, storage } from '@/firebase'
~~~~~~~~~~~~

Found 2 errors.

—

### ✅ Complete Fix Checklist

#### ✅ 1. **Ensure correct file exists**
Double-check that the following file exists:

project-root/
├── src/
│   └── firebase/
│       └── index.ts  ✅ <-- this must exist

Or if you're importing like `@/firebase` directly, then this file must exist:

project-root/
├── src/
│   └── firebase.ts  ✅

If you’re importing `@/firebase` and only `firebase/index.ts` exists, your import must be:

import { db, storage } from '@/firebase/index'

Or create a `src/firebase.ts` that re-exports from `index.ts`:

// src/firebase.ts
export * from './firebase/index'

—

#### ✅ 2. **Make sure the right `tsconfig` is used during build**
Run this in terminal:

npx tsc --project tsconfig.app.json

This forces TypeScript to compile using your app-specific config. If it shows the same error, the alias is still not being respected due to misconfiguration or wrong usage.

—

#### ✅ 3. **Ensure you're using the right version of `tsconfig-paths` or tooling**
If you're using tools like `vite`, `vue-tsc`, or `tsc-alias`, they must support path aliases. If you're using `vue-tsc` for type-checking (as many Vue 3 projects do), make sure it’s up to date:

npm install vue-tsc --save-dev

And make sure you run:

npx vue-tsc --noEmit

Instead of just `tsc` — because `tsc` may not parse `*.vue` files unless properly configured.

—

#### ✅ 4. **(Optional) Add alias in `tsconfig.json` too**
Though technically not needed if you're referencing `tsconfig.app.json`, some tools may resolve types based on the root `tsconfig.json`. You can add:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

to your `tsconfig.json` to avoid issues with tools using the base config.

—

### ✅ Summary

| Checkpoint | Status |
|——————————|——–|
| `src/firebase/index.ts` exists or correctly referenced | ✅ |
| `baseUrl` and `paths` in `tsconfig.app.json` | ✅ |
| Using `vue-tsc` instead of `tsc` for type-check | ✅ |
| Restarted dev server + IDE | ✅ |

—

If this still fails, can you share the structure of your `src/firebase` directory and confirm:
– the name of the file you're importing from (`firebase.ts` or `firebase/index.ts`)?
– what you get if you run: `npx vue-tsc –noEmit`?

Let’s sort this fully.

—

### ✅ 100% Fix for Vite + Vue 3 + TypeScript Path Aliases (Build-Time Error)

#### 🔧 Step 1: Ensure Vite alias is configured

In your `vite.config.ts`:

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)), // This is critical
    },
  },
})

—

#### 🔧 Step 2: Ensure `baseUrl` and `paths` are in `tsconfig.app.json`

✅ Your `tsconfig.app.json` already looks like this — just re-check this part:

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["./src/*"]
  }
}

—

#### ✅ Step 3: Check your `package.json` build script

If you're using `vue-tsc` for type checking, make sure your `build` script **does not** run `tsc`, but instead runs something like this:

"scripts": {
  "type-check": "vue-tsc --noEmit",
  "build": "vue-tsc --noEmit && vite build"
}

> ❌ Don't run `tsc` directly — it doesn't understand `.vue` files or Vue aliases well unless heavily customized.

—

#### 🔧 Step 4: Check file structure

Ensure that:

– `src/firebase/index.ts` exists (✅)
– Your import is:

import { db, storage } from '@/firebase'

– If that still fails, you can also try explicitly importing from `@/firebase/index`.

—

#### 🧪 Try clean build

Sometimes a dirty build cache causes issues. Run:

rm -rf dist node_modules .vite .nuxt
npm install
npm run build

—

#### ✅ Step 5: Use absolute paths only inside `src`

Ensure your `myPortfolio.ts` is **inside `src/`**, not outside. If it’s in `src/dbstore/firebase/myPortfolio.ts`, that’s ✅.

But if it’s in something like `dbstore/firebase/myPortfolio.ts` (outside `src/`), the alias won't work unless you adjust `paths`.

—

### If All Else Fails:

You can **bypass the alias** just to confirm that's the only problem:

Change:

import { db, storage } from '@/firebase'

To:

import { db, storage } from '../../firebase'

If that fixes it during build, the problem is **definitely with alias resolution** in your toolchain.

—

Let me know what happens when you try this! I’ll stay with you until we fully resolve it.

– `"type-check": "vue-tsc –build"` ✅
– `"build-only": "vite build"` ✅
– `"build": "run-p type-check "build-only {@}" –"` ❗

The problem is **most likely in the `vue-tsc –build` step**, which is looking for a `tsconfig.json` with a valid `references` setup.

Let’s resolve this 100%.

—

### ✅ Summary of the Issue

`vue-tsc –build` runs in **project references mode**, which uses `tsconfig.json` and all referenced configs (`tsconfig.app.json`, etc.). But your alias config (`baseUrl`, `paths`) is only in `tsconfig.app.json`.

> That alias is **not available** to `vue-tsc –build` unless it's also declared at the top-level `tsconfig.json`.

—

### ✅ Final Fix: Add alias config to `tsconfig.json`

Update your root `tsconfig.json` like this:

{
  "files": [],
  "references": [
    { "path": "./tsconfig.node.json" },
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.vitest.json" },
    { "path": "./nightwatch/tsconfig.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

> ✅ This ensures `vue-tsc –build` can resolve `@/firebase`.

—

### ✅ Then clean and rebuild:

rm -rf dist .vite node_modules
npm install
npm run build

—

Let me know if that resolves it — this should fully eliminate the `TS2307: Cannot find module '@/firebase'` error during build.

### ✅ Fixed `package.json`:

{
  "name": "openeratech-task",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json",
    "preview": "vite preview",
    "test:unit": "vitest",
    "test:e2e": "nightwatch tests/e2e/*",
    "lint": "eslint . --fix",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "@mdi/font": "^7.4.47",
    "@nuxt/ui": "^3.0.2",
    "firebase": "^11.6.0",
    "nprogress": "^0.2.0",
    "pinia": "^3.0.1",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
    "@nightwatch/vue": "^3.1.2",
    "@nuxt/types": "^2.18.1",
    "@nuxt/typescript": "^2.8.1",
    "@tsconfig/node22": "^22.0.1",
    "@types/jsdom": "^21.1.7",
    "@types/node": "^22.14.0",
    "@vitejs/plugin-vue": "^5.2.3",
    "@vitejs/plugin-vue-jsx": "^4.1.2",
    "@vitest/eslint-plugin": "^1.1.39",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.5.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.7.0",
    "chromedriver": "^135.0.0",
    "eslint": "^9.22.0",
    "eslint-plugin-vue": "~10.0.0",
    "firebase-tools": "^14.1.0",
    "geckodriver": "^5.0.0",
    "jiti": "^2.4.2",
    "jsdom": "^26.0.0",
    "nightwatch": "^3.12.1",
    "npm-run-all2": "^7.0.2",
    "prettier": "3.5.3",
    "ts-node": "^10.9.2",
    "typescript": "~5.8.0",
    "vite": "^6.2.4",
    "vite-plugin-nightwatch": "^0.4.6",
    "vite-plugin-vue-devtools": "^7.7.2",
    "vite-plugin-vuetify": "^2.1.1",
    "vitest": "^3.1.1",
    "vue-tsc": "^2.2.8",
    "vuetify": "^3.8.1"
  }
}

—

### 🛠 Key Fixes Made

– ✅ Replaced `vue-tsc –build` with `vue-tsc –noEmit -p tsconfig.app.json` (faster, respects app config)
– ✅ Cleaned `build` script to run `type-check` before `vite build`
– ✅ Removed unnecessary quoting: `"build-only {@}"` → `build-only`
– ✅ Confirmed alias support by expecting `baseUrl` + `paths` in `tsconfig.json` root

—

Let me know if you'd like the alias to be different (`@src` or something custom), or if you want automatic type-check in CI/CD!