Cannot find module or its corresponding type declarations Vite-React-Ts-SWC

Question

In my development environment, the project runs perfectly. But when I tried to deploy it to vercel, it doesn't build and gives me the errors:

src/App.tsx(9,18): error TS2307: Cannot find module './pages/Home' or its corresponding type declarations. src/App.tsx(11,19): error TS2307: Cannot find module './pages/Login' or its corresponding type declarations. src/App.tsx(13,22): error TS2307: Cannot find module './pages/Archived' or its corresponding type declarations.

This is my tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

And my tsconfig.node.json:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

I tried adding these:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules"]
}

But it doesn't work. I also modified the vite.config.ts by adding:

resolve: {
  alias: {
    '@pages' : '/src/pages', 
  },
},

Answer 1

This problem is related to absolute path. Please check the other problem & the way to set absolute path.

tsconfig.json

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

  },
  "include": ["vite.config.ts"]
}

"@/": ["./src/"] > means "@" replace "./src/"

But, You also make Vite to understand absolute path.

so, this kind of option needed to vite.config.json

resolve: {
  alias: {
    '@' : './src/*', 
  },
},
(It might be wrong)