ARTICLE AD BOX
I'm trying to deploy a Vite + React + TypeScript project to Vercel, but I'm getting multiple TS2307 errors during the build. The imports use the @/ alias, which works fine locally, but fails on deployment.
11:02:27.672 11:02:27.673 4 high severity vulnerabilities 11:02:27.673 11:02:27.673 To address all issues, run: 11:02:27.673 npm audit fix 11:02:27.673 11:02:27.674 Run `npm audit` for details. 11:02:27.985 11:02:27.986 > [email protected] build 11:02:27.986 > tsc -b && vite build 11:02:27.986 11:02:32.149 src/App.tsx(5,20): error TS2307: Cannot find module '@/components/Navbar' or its corresponding type declarations. 11:02:32.150 src/App.tsx(7,24): error TS2307: Cannot find module '@/components/RoleNavbar' or its corresponding type declarations. 11:02:32.150 src/App.tsx(8,22): error TS2307: Cannot find module '@/pages/JobsPage' or its corresponding type declarations. 11:02:32.150 src/App.tsx(9,25): error TS2307: Cannot find module '@/pages/CompanyList' or its corresponding type declarations. 11:02:32.150 src/App.tsx(10,26): error TS2307: Cannot find module '@/pages/ApprovalPage' or its corresponding type declarations. 11:02:32.150 src/App.tsx(11,25): error TS2307: Cannot find module '@/pages/ApprovedPage' or its corresponding type declarations. 11:02:32.151 src/App.tsx(21,25): error TS2307: Cannot find module '@/pages/ProfilePage' or its corresponding type declarations. 11:02:33.052 Error: Command "npm run build" exited with 2vite.config.ts file ::
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' import tailwindcss from '@tailwindcss/vite' import path from "path" // https://vite.dev/config/ export default defineConfig({ plugins: [react(), tailwindcss()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, })tsconfig.json file ::
{ "files": [], "references": [ { "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" } ], "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, } }tsconfig.app.json file ::
{ "compilerOptions": { "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", "target": "ES2022", "useDefineForClassFields": true, "lib": ["ES2022", "DOM", "DOM.Iterable"], "module": "ESNext", "types": ["vite/client"], "skipLibCheck": true, /* Bundler mode */ "moduleResolution": "bundler", "allowImportingTsExtensions": true, "verbatimModuleSyntax": true, "moduleDetection": "force", "noEmit": true, "jsx": "react-jsx", /* Linting */ "strict": true, "noUnusedLocals": true, "noUnusedParameters": true, "erasableSyntaxOnly": true, "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true, "baseUrl": ".", "paths": { "@/*": [ "./src/*" ] } }, "include": ["src"] }How can I fix the deployment error? I have done all the things, like adding vite-tsconfig-paths() instead of the normal relative path specs, to help fix this problem, but I am stuck in the deployment process.
