You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
[PROPOSAL] Migrate from CRA/CRACO to Vite to resolve unfixable security vulnerabilities #7
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.
Activity