Problem
A recent security audit (by running npm audit) revealed 27 vulnerabilities (14 High, 4 Moderate) within the project's dependency tree. These vulnerabilities are primarily tied to react-scripts v5.0.1 and its nested
dependencies (e.g., nth-check, postcss, serialize-javascript, and webpack-dev-server).
Because these packages are deeply nested under react-scripts, npm audit fix is unable to resolve them without a --force flag, which attempts to downgrade react-scripts to an incompatible version
(0.0.0), effectively breaking the build system.
Key Vulnerabilities Found:
- High: Remote Code Execution (RCE) in serialize-javascript.
- High: ReDoS (Regular Expression Denial of Service) in nth-check.
- Moderate: Source code exposure in webpack-dev-server.
- Moderate: XSS vulnerabilities in postcss.
The Limitation of CRACO
While CRACO currently handles our custom PostCSS and path aliases, it still relies on the aging react-scripts architecture. This makes it impossible to update core build tools (like Webpack or
PostCSS) to secure versions without "ejecting" or waiting for a react-scripts update that may never come.
Proposed Solution: Migration to Vite
I propose migrating the project from Create React App + CRACO to Vite.
Benefits:
- Security: Removes the legacy react-scripts dependency tree, resolving all currently "unfixable" vulnerabilities.
- Performance: Provides near-instant Hot Module Replacement (HMR) and significantly faster cold starts.
- Simplicity: Replaces craco.config.js with a standard vite.config.ts. Path aliases and PostCSS are supported natively.
- Modern Standard: Vite is now the industry-recommended tool for React SPAs, ensuring better long-term maintainability.
High-Level Migration Plan
- Add vite and @vitejs/plugin-react as dev dependencies.
- Create vite.config.ts to replicate existing CRACO aliases (@/) and PostCSS settings.
- Move public/index.html to the root and update it for Vite (using ESM scripts).
- Remove react-scripts, @craco/craco, and update package.json scripts.
- Verify build and test parity.
Extras
I can work on this if you give me green light
Problem
A recent security audit (by running
npm audit) revealed 27 vulnerabilities (14 High, 4 Moderate) within the project's dependency tree. These vulnerabilities are primarily tied to react-scripts v5.0.1 and its nesteddependencies (e.g., nth-check, postcss, serialize-javascript, and webpack-dev-server).
Because these packages are deeply nested under react-scripts, npm audit fix is unable to resolve them without a --force flag, which attempts to downgrade react-scripts to an incompatible version
(0.0.0), effectively breaking the build system.
Key Vulnerabilities Found:
The Limitation of CRACO
While CRACO currently handles our custom PostCSS and path aliases, it still relies on the aging react-scripts architecture. This makes it impossible to update core build tools (like Webpack or
PostCSS) to secure versions without "ejecting" or waiting for a react-scripts update that may never come.
Proposed Solution: Migration to Vite
I propose migrating the project from Create React App + CRACO to Vite.
Benefits:
High-Level Migration Plan
Extras
I can work on this if you give me green light