I have a vite/react project migrated from CRA for a while, and I just mentioned that when I run tsc command to check the project for typescript errors it will never finish. So maybe someone can help to fix this problem?
My package.json file:
{
"name": "...",
"type": "module",
"version": "1.39.0",
"private": true,
"engines": {
"node": ">=20.10.0 <21.5.0"
},
"dependencies": {
"@datadog/browser-logs": "^5.10.0",
"@datadog/browser-rum": "^5.10.0",
"@fullcalendar/core": "^6.1.10",
"@fullcalendar/react": "^6.1.10",
"@fullcalendar/timegrid": "^6.1.10",
"@headlessui/react": "^1.7.17",
"@heroicons/react": "^2.0.17",
"@hookform/error-message": "^2.0.1",
"@marker.io/browser": "^0.19.0",
"@radix-ui/react-checkbox": "^1.0.4",
"@reduxjs/toolkit": "^2.2.1",
"@tanstack/match-sorter-utils": "^8.8.4",
"@tanstack/react-table": "^8.7.9",
"@tinymce/tinymce-react": "^4.3.2",
"@twilio/video-processors": "2.1.0",
"@twilio/voice-sdk": "2.9.0",
"@unleash/proxy-client-react": "^4.2.2",
"@zoom/videosdk": "^1.10.7",
"amazon-cognito-identity-js": "^6.3.5",
"aws-amplify": "^6.0.9",
"chart.js": "^4.4.1",
"chartjs-adapter-dayjs-4": "^1.0.4",
"classnames": "^2.5.1",
"compare-versions": "^6.1.0",
"framer-motion": "^11.0.3",
"html-react-parser": "^5.1.8",
"js-file-download": "^0.4.12",
"linkify-react": "^4.1.3",
"linkifyjs": "^4.1.2",
"query-string": "^9.0.0",
"react": "^18.2.0",
"react-auth-code-input": "^3.2.1",
"react-chartjs-2": "^5.2.0",
"react-countdown": "^2.3.2",
"react-custom-scrollbars-2": "^4.5.0",
"react-day-picker": "^8.7.1",
"react-dom": "^18.2.0",
"react-error-boundary": "^4.0.12",
"react-hook-form": "^7.49.2",
"react-horizontal-scrolling-menu": "^4.1.1",
"react-idle-timer": "^5.5.3",
"react-intersection-observer": "^9.5.3",
"react-loading-skeleton": "^3.1.0",
"react-lottie-player": "^1.5.4",
"react-modern-drawer": "^1.2.0",
"react-number-format": "^5.3.1",
"react-paginate": "^8.2.0",
"react-phone-number-input": "^3.3.1",
"react-redux": "^9.1.0",
"react-router-dom": "^6.14.2",
"react-simple-star-rating": "^5.1.7",
"react-textarea-autosize": "^8.5.2",
"react-toastify": "^9.1.3",
"react-use": "^17.4.3",
"redux-persist": "^6.0.0",
"sanitize-html": "^2.11.0",
"socket.io-client": "^4.7.1",
"styled-components": "^6.1.6",
"stylis": "^4.3.0",
"tailwind-merge": "^2.0.0",
"tailwind-scrollbar-hide": "^1.1.7",
"twilio-video": "^2.27.0",
"unleash-proxy-client": "^3.3.1",
"util": "^0.12.4",
"yet-another-react-lightbox": "^3.15.6"
},
"scripts": {
"madge": "madge --circular --extensions ts,tsx,js,jsx src",
"postinstall": "rimraf public/virtualbackground && copyfiles -f node_modules/@twilio/video-processors/dist/build/* public/virtualbackground",
"start": "vite",
"build": "cross-env NODE_OPTIONS=--max-old-space-size=8192 vite build",
"serve": "vite preview",
"test": "vitest",
"coverage": "vitest run --coverage",
"eject": "react-scripts eject",
"lint": "eslint --ext .js,.cjs,.ts,.tsx src",
"lint:check": "eslint --ext .js,.cjs,.ts,.tsx src --fix",
"cs": "prettier --write .",
"cs:check": "prettier --check .",
"prepare": "husky install",
},
"lint-staged": {
"*.{ts,tsx}": [
"prettier --write",
"eslint --fix"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
"devDependencies": {
"@commitlint/cli": "^17.8.0",
"@commitlint/config-conventional": "^17.8.0",
"@faker-js/faker": "7.6.0",
"@tailwindcss/forms": "^0.5.3",
"@testing-library/dom": "^9.3.4",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "^14.2.1",
"@testing-library/user-event": "^14.5.2",
"@types/chai": "^4.3.11",
"@types/copyfiles": "^2.4.1",
"@types/lodash": "^4.14.178",
"@types/lodash.groupby": "^4.6.6",
"@types/mocha": "^10.0.6",
"@types/node": "^20.11.24",
"@types/react": "^18.2.46",
"@types/react-dom": "^18.2.18",
"@types/sanitize-html": "^2.11.0",
"@typescript-eslint/eslint-plugin": "^6.17.0",
"@typescript-eslint/parser": "^6.17.0",
"@vitejs/plugin-react": "^4.2.1",
"@vitest/coverage-v8": "^1.3.1",
"allure-commandline": "^2.27.0",
"allure-mocha": "^2.13.0",
"autoprefixer": "^10.4.2",
"axios": "^1.6.7",
"babel-plugin-macros": "^3.1.0",
"babel-plugin-styled-components": "^2.1.4",
"branch-name-lint": "^2.1.1",
"chai": "^4.3.7",
"copyfiles": "^2.4.1",
"cross-env": "^7.0.3",
"crypto-browserify": "^3.12.0",
"dayjs": "^1.11.10",
"eslint": "^8.56.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-airbnb-typescript": "^17.1.0",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-prettier": "^5.1.2",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-tailwindcss": "^3.13.0",
"eslint-plugin-testing-library": "^6.2.0",
"husky": "^8.0.3",
"js-image-generator": "^1.0.4",
"jsdom": "^24.0.0",
"lint-staged": "^15.2.0",
"lodash": "^4.17.21",
"madge": "^6.1.0",
"mocha": "^10.3.0",
"mocha-multi-reporters": "^1.5.1",
"moment": "^2.29.4",
"msw": "^2.2.0",
"node-fetch": "^3.3.1",
"playwright": "^1.41.2",
"playwright-core": "^1.41.2",
"postcss": "^8.4.32",
"prettier": "^3.1.1",
"prettier-plugin-tailwindcss": "^0.5.9",
"react-select-event": "^5.3.0",
"rimraf": "^5.0.1",
"stream-browserify": "^3.0.0",
"tailwindcss": "^3.4.0",
"testrail-mocha-reporter": "^0.5.4",
"tinymce": "5.10.9",
"ts-mocha": "^10.0.0",
"ts-node": "^10.9.1",
"twin.macro": "^3.3.1",
"typescript": "^5.3.3",
"vite": "^5.1.5",
"vite-bundle-visualizer": "^0.10.0",
"vite-plugin-node-polyfills": "^0.21.0",
"vite-plugin-svgr": "^4.2.0",
"vite-tsconfig-paths": "^4.2.2",
"vitest": "^1.3.1",
"vitest-canvas-mock": "^0.3.3"
},
"packageManager": "[email protected]"
}
My tsconfig.json file:
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"baseUrl": "src",
"types": ["vitest/globals", "vite-plugin-svgr/client"],
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src/**/*", "types/**/*"],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}
Also, I have tsconfig.node.json:
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}
I have checked my project for circular dependencies with help of madge and fixed all of them, and it didn't help.