Skip to content

[PROPOSAL] Migrate from CRA/CRACO to Vite to resolve unfixable security vulnerabilities #7

@AgustinRamiroDiaz

Description

@AgustinRamiroDiaz

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:

  1. Security: Removes the legacy react-scripts dependency tree, resolving all currently "unfixable" vulnerabilities.
  2. Performance: Provides near-instant Hot Module Replacement (HMR) and significantly faster cold starts.
  3. Simplicity: Replaces craco.config.js with a standard vite.config.ts. Path aliases and PostCSS are supported natively.
  4. Modern Standard: Vite is now the industry-recommended tool for React SPAs, ensuring better long-term maintainability.

High-Level Migration Plan

  1. Add vite and @vitejs/plugin-react as dev dependencies.
  2. Create vite.config.ts to replicate existing CRACO aliases (@/) and PostCSS settings.
  3. Move public/index.html to the root and update it for Vite (using ESM scripts).
  4. Remove react-scripts, @craco/craco, and update package.json scripts.
  5. Verify build and test parity.

Extras

I can work on this if you give me green light

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions