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

[MuhammadSaim]

Cannot find module: I'm encountering an error 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"),
    },
  },
});

I still couldn't get the alias right If I import using relative directory path working fine but the @ alias has an error.

[Loureto]

@MuhammadSaim

Could you do the following: move the configuration into the "tsconfig.app.json" file and add the following inside "compilerOptions":

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

[MuhammadSaim]

Thanks for the answer It fixes my issue now, I have another one when I generate the component, shadcn generates in the root path @/components/ui instead of src/components/ui.

[Loureto]

@MuhammadSaim

In my project, I copied everything from the "tsconfig.app.json" and "tsconfig.node.json" files and added it all to the main file, which is "tsconfig.json".

From my point of view, it doesn't make much sense to create two configuration files, as it will depend on the size of each project.

It turned out like this:

[inwardmovement]

Hi, I have the same error, even after applying @Loureto's fix.
Can you take a look at the alias branch of this repo and tell me what's wrong please?