Modernize the frontend toolchain (CRA 4, React 17, mismatched @types)
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 0
- Avg merge
- 2h 19m
- Merged PRs (30d)
- 30
Description
## Summary
`react-app/package.json` is pinned to a toolchain that is several years behind and already needs workarounds:
- `react-scripts ^4.0.3` (CRA 4, deprecated) requires `NODE_OPTIONS=--openssl-legacy-provider` in both `start` and `build` to run on Node 17+.
- `react ^17.0.2` at runtime, but `@types/react ^19.1.10` and `@types/react-dom ^19.1.7` in devDependencies. Components use `React.JSX.Element`, which only exists in 18.2+ types, so the code type-checks against an API the runtime doesn't have (and `ReactDOM.render` in `index.js` no longer exists in React 19).
- `react-router-dom ^5.2.0` (v6 has been current since 2021), `typescript ^4.9.5`, plain `redux ^4` with hand-written thunks (Redux Toolkit would remove most of `store/*.ts`).
- `"build": "CI=false && NODE_OPTIONS=... react-scripts build"`: the `CI=false &&` only works because Render already exports `CI`; use `cross-env` or drop it.
- Two Font Awesome stylesheets are loaded from CDNs in `public/index.html` (v5.5.0 **and** v6.0.0-beta3); icons use both `fas` and `fa-solid` prefixes.
- The logo is hot-linked from `https://i.imgur.com/c7KuGow.png` (`Navigation/index.tsx:22`) and the login/signup hero images from Unsplash. The README already notes that the previous imgur images expired; bundle the logo under `react-app/public/`.
## Proposal
Either (a) minimal: move to `react-scripts 5`, align `@types/react` with the runtime, one Font Awesome version, local logo; or (b) recommended: migrate to Vite + React 18 + React Router 6 + Redux Toolkit. Option (b) also removes the `NODE_OPTIONS` hack and shrinks the bundle. Do it after or as part of the TypeScript migration issue.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with react-app/package.json and the TypeScript migration issue, then inspect react-app/src/index.js, Navigation/index.tsx:22, public/index.html, react-app/public/, and store/*.ts. The proposal presents either a minimal CRA upgrade or a broader Vite migration, so confirm the chosen scope before changing anything. Done means the selected toolchain path is applied consistently, including dependency versions, scripts, assets, and affected tests or build checks.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- build-system, frontend, tooling
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100