Next.js App Router: Persistent "Module not found" Error Despite Correct Path Alias/Relative Path Setup

[Oasis11217AI]

Summary

We need help understanding why module resolution is failing in our Next.js App Router project when importing a module (src/lib/firebase/firebaseConfig.ts) into a component (src/components/AuthForm.tsx). Both path aliases (@/lib/...) configured in tsconfig.json and standard relative paths (../lib/...) result in a "Module not found" error, despite the file structure appearing correct and standard troubleshooting steps (cache clearing, restarts, dependency reinstall) having been performed. We are seeking insights into potential configuration issues, known bugs, or alternative approaches for module resolution in this context.

Additional information

Environment:
Framework: Next.js (Version: [Check your package.json, e.g., 15.3.1])
Language: TypeScript
Routing: App Router (using src/app directory)
Styling: Tailwind CSS
OS: Windows 10/11
Node.js Version: [Run node -v in terminal, e.g., v22.14.0]
npm Version: [Run npm -v in terminal, e.g., 10.9.2]
Code Editor: Visual Studio Code
Project Structure Relevant Files:
aurora9-prototype-ui/
├── node_modules/
├── public/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   └── page.tsx       <-- Imports AuthForm
│   ├── components/
│   │   └── AuthForm.tsx   <-- Tries to import firebaseConfig
│   └── lib/
│       └── firebase/
│           └── firebaseConfig.ts  <-- Exports Firebase services
├── .env.local             <-- Contains Firebase keys
├── next.config.mjs
├── package.json
├── tsconfig.json          <-- Contains path alias config
└── ... (other root files)
Problem Description:
We are encountering a persistent "Module not found: Can't resolve..." error when trying to import our Firebase configuration module (src/lib/firebase/firebaseConfig.ts) into a component (src/components/AuthForm.tsx). The error occurs during the Next.js build/development server process, specifically showing up in the browser overlay and terminal output related to the component file.
Error Message:
Module not found: Can't resolve '@/lib/firebase/firebaseConfig'
(Or alternatively, if using relative path: Module not found: Can't resolve '../lib/firebase/firebaseConfig.ts')
Relevant Code Snippets:
src/components/AuthForm.tsx (Import attempt - Line 5):
// Attempt 1 (Alias Path - Preferred):
import { auth } from '@/lib/firebase/firebaseConfig';

// Attempt 2 (Relative Path):
// import { auth } from '../lib/firebase/firebaseConfig';

// Attempt 3 (Relative Path with Extension):
// import { auth } from '../lib/firebase/firebaseConfig.ts';
(Note: All attempts result in the same error category)
src/lib/firebase/firebaseConfig.ts (Relevant Export):
(Note: All attempts result in the same error category)
src/lib/firebase/firebaseConfig.ts (Relevant Export):
// ... imports and config object using process.env ...

const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const auth = getAuth(app);
const db = getFirestore(app);
// ... analytics init ...

export { app, auth, db, analytics }; // Exports 'auth' correctly
tsconfig.json (Relevant Sections):
 "compilerOptions": {
    // ... other standard options ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
Troubleshooting Steps Already Attempted:
Verified exact file paths, names, and casing for all relevant files/folders (src, lib, firebase, components, firebaseConfig.ts, AuthForm.tsx).
Confirmed firebaseConfig.ts correctly exports the auth object.
Tried importing using the path alias (@/lib/firebase/firebaseConfig).
Tried importing using relative paths (../lib/firebase/firebaseConfig and ../lib/firebase/firebaseConfig.ts).
Verified tsconfig.json contains the correct baseUrl and paths configuration for the @/* alias.
Stopped and restarted the Next.js development server (npm run dev) multiple times after changes.
Cleared Next.js cache by deleting the .next folder.
Cleaned dependencies by deleting the node_modules folder and running npm install.
Restarted VS Code completely.
Restarted the VS Code TypeScript Server using the Command Palette.
Question:
Despite the file structure and tsconfig.json appearing correct, and having attempted various path formats and standard troubleshooting steps, the module resolution consistently fails for this specific import within the AuthForm.tsx component. Are there any known issues with path aliases or relative paths between sibling directories (components and lib) within the src directory when using the Next.js App Router, or any other potential configuration conflicts we might be overlooking?

Example

No response