TypeScript compilation fails with "JSX element implicitly has type 'any'" and "Cannot find module 'react'" errors in React project

My React with TypeScript project was building successfully but now I'm getting TypeScript compilation errors when running npm run build:

1. JSX errors:

   JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists

2. Module resolution errors:

   Cannot find module 'react' or its corresponding type declarations

3. JSX runtime errors:

   This JSX tag requires the module path 'react/jsx-runtime' to exist, but none could be found

4. Type errors:

   Parameter '...' implicitly has an 'any' type

5. Syntax errors:

   ')' expected and Declaration or statement expected in specific components like MachinesList.tsx

The errors occur across multiple React components in my project. I've adjusted the TypeScript configuration but the issues persist. The project uses React 18.2.0, TypeScript 4.9.3, Vite 4.1.0, and Node.js 18. I:

1. Tried tsconfig.json with moduleResolution settings "node" and "bundler".
2. Set strict: false, noUnusedLocals: false, and noUnusedParameters: false to be more lenient.
3. Added allowSyntheticDefaultImports: true and esModuleInterop: true.
4. Verified that @types/react and @types/react-dom are installed.
5. Cleared node_modules and reinstalled dependencies.
6. Checked that all React imports are correct.
7. Fixed JSX syntax errors in components (missing closing tags in MachinesList.tsx).
8. Verified that all JSX elements are properly closed and nested.

The compilation still fails with the same JSX and module resolution errors. The errors suggest that TypeScript can't find React type definitions, even though the packages are installed and the imports look correct.

Error in MachinesList.tsx:

src/components/dashboard/MachinesList.tsx:523:5 - error TS1005: ')' expected.
src/components/dashboard/MachinesList.tsx:535:3 - error TS1128: Declaration or statement expected.
src/components/dashboard/MachinesList.tsx:536:1 - error TS1128: Declaration or statement expected.

This suggests a JSX structure issue, but after fixing syntax errors the broader TypeScript configuration problems persist.

tsconfig.json:

{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": false,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": true,
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}