[WIP] Eliminating 43 npm vulnerabilities: react-scripts to Vite, ESLint 9, react-redux hooks, dependency cleanup, bugfixes

[MaurerAnton]

⚠ Work in progress! This is a large PR that changes many things. Before merging I need to thoroughly verify and document everything. I will add changes gradually and notify when it's ready for review. I also plan to write extensive details in the PR discussion. A draft version is already working and shows good results, but I'm not confident about all aspects yet — I don't want to rush, but rather draw conclusions step by step. By opening this PR I'm showing that I'm ready to share code and add more every day. This PR will change about 60 files in the project in its final form.

---

Changes

1. Create React App (CRA) → Vite. The project used react-scripts ^5.0.1 (line 59 of package.json) — the npm package that provides CRA's build tooling. It was the last stable release of Create React App (April 2022). CRA was officially deprecated in February 2025. The React docs now recommend Vite as the first build tool for new projects, and major frameworks (Nuxt, SvelteKit, Astro, React Router, SolidStart) have adopted Vite as their foundation.

2. ESLint 8 → ESLint 9. The project was using ^8.57.1 (line 98 of package.json), the final ESLint 8 release from September 2024 (end of life). The migration follows the official guide. At the time of creating this WIP PR, .eslintrc has already been deleted; I will send eslint.config.js as a replacement shortly. If possible, I will migrate directly to ESLint 10; if not, I will lay the groundwork for a future upgrade.

3. react-redux connect() → useSelector/useDispatch. The React Redux docs recommend hooks as the default: "The existing connect API still works, but the hooks API is simpler and works better with TypeScript." This is especially fitting as TypeScript will be pulled up alongside this change. For example, connect(mapStateToProps)(Formatter) at Formatter.jsx:130.

4. Dependency cleanup. Removed some unnecessary packages from the dependency list and specified the remaining ones more precisely.

5. Bug fixes. Improved the project's interaction with the runtime environment and embedded database.

---

Frontend tests

I built the frontend tests using Vitest and also implemented things that weren't covered by the previous tests. For example, I started thinking about improving the tests after noticing the TODO in authentication.test.js at line 211.

---

Outlook

This PR has the potential to systematically resolve most of the project's open pull requests.

---

What's next

To make sure the code is clean, I decided to rewrite the PR based on the draft rather than uploading the draft directly. Going forward I will reference the draft repeatedly — for instance, I managed to make the project work with Vite 6 (Vite 5 is unlikely), while the current release is Vite 8. In the coming days I will publish the full changelog and description of all changes.

Closes #346.

[MaurerAnton]

This PR builds on the CRA-to-Vite migration draft started by the architect (commit fe37065e0), but goes significantly further — to a complete solution.
Beyond replacing CRA with Vite, this PR addresses other important areas. Its goal is to eliminate 43 npm vulnerabilities and make the frontend more reliable: a well-configured ESLint 9 instead of the outdated Airbnb config, modern React Redux hooks instead of connect(), dependency cleanup from unused packages, and bug fixes.
The ESLint 8→9 migration turned out to be non-trivial. It is not enough to simply bump the version and rewrite the config in the new format. The Airbnb config (eslint-config-airbnb) is incompatible with ESLint 9 and has not been updated since 2021. This required examining the old .eslintrc and --print-config output, cross-referencing every rule against what is available in ESLint 9 + @eslint/js + typescript-eslint v8, and filtering out deprecated, frozen, and inapplicable rules. I will soon publish detailed notes on which rules were preserved, which were lost, which are worth reconsidering, and why — with links to official sources.

[MaurerAnton]

I took another look at my draft and noticed a small difference in rest.js — specifically how the dev-mode check is done:

// Your draft
export const baseURL = import.meta.env.MODE === 'development' ? testServer : '';
// What I'd suggest
export const baseURL = (import.meta.env.DEV && import.meta.env.MODE !== 'test') ? testServer : '';

This is the approach used by many Vite projects in the wild — for example Streamlit (https://github.com/streamlit/streamlit/blob/ccad0dd74215ef0738f81d08ce629c7045b0fd95/frontend/connection/src/constants.ts#L81) (44.5k★).

[MaurerAnton]

One difference between our drafts caught my eye: serviceWorker.js. You kept it; I removed it. Here's why I think removal is the right call.
The serviceWorker.js currently on develop originally comes from CRA's v2.1.0 template — the SHA at ProjectForge's initial commit and the CRA v2.1.0 template are identical (2283ff9c).
I can explain which direction to take if the functionality is wanted down the road.

[MaurerAnton]

As a follow-up to the serviceWorker.js removal — the same logic applies to index.jsx in your draft. It still imports and calls serviceWorker.unregister()

[MaurerAnton]

One more note from my draft: import React from 'react' can (and should) be removed from some files. React 17(+) changed how JSX (and TSX ofc) is compiled under the hood, making the manual import unnecessary. More on this here: https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
I haven't decided whether to include this cleanup in the PR yet, but eventually removing these dead imports from the project is desirable.

[MaurerAnton]

One thing we noticed in your draft: TypeScript is still at ^4.9.5 (line 95). For the Vite migration as we're approaching it, TypeScript 5 will likely be needed.
TypeScript 5.0 introduced moduleResolution: "bundler" — a mode designed specifically for tools like Vite: "If you are using a modern bundler like Vite... the new bundler option should be a good fit for you."
We'll try to explain in more detail later why this matters.

[MaurerAnton]

For the changes to src/actions/authentication.test.js I've put together a draft line-by-line commentary: https://github.com/MaurerAnton/projectforge/tree/draft43npm-docs/projectforge-webapp/docs/diff-commentary

[MaurerAnton]

For better readability I'm writing the documentation in HTML — Markdown can't really produce a truly visual page. The draft page for src/actions/authentication.test.js is hosted at: https://maureranton.com/diff-authentication-test-commentary-en.html

[MaurerAnton]

and for reducers/authentication.test.js at https://maureranton.com/diff-reducer-test-commentary-en.html

[MaurerAnton]

Just wanted to share what I've been working on while reviewing the remaining files for this PR — it's taking a bit longer than expected because I'm being thorough with the verification.

In parallel, I've started building comprehensive documentation for the entire ProjectForge codebase — all 4,321 source files — using LLMs to help me understand the project's architecture faster. The docs are 1:1 with git ls-files, so every file has its own page with:

• Architecture analysis (class hierarchy, dependencies, design patterns)
• Annotated git history (what actually changed between commits, not just raw messages)
• Line statistics (code/comments/blanks)
• Direct links to source on GitHub

You can browse them here: https://maureranton.github.io/projectforge/file-index.html — it's a collapsible tree with a searchable flat table and lazy-loaded realtime line counts.

This has already helped me uncover several things I wouldn't have noticed otherwise — like the CardDAV PROPFIND handler evolution, the transaction refactoring history, and which old Wicket modules were migrated to Kotlin vs. just deleted.

This week I'll switch back to fixing the remaining issues in the PR. The docs are on a separate branch (draft43npm-docs) so they don't interfere with the code changes.