How to resolve 'Cannot find module' and 'noEmit' issues in TypeScript project with Vite?

Question

Cannot find module: I'm encountering an error I Cannot find module @/lib/utils even though I have configured path aliases in both tsconfig.json and vite.config.ts. It seems like TypeScript or Vite isn't resolving the alias properly.

tsconfig.json

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

vite.config.ts

import react from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Answer 1

We can move the configuration into the tsconfig.app.json file and add the following inside "compilerOptions":

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

Special Thanks to Loureto for the Answer.