EyeSeeTea · adrianq · Apr 16, 2026 · Apr 1, 2026 · Apr 13, 2026 · Apr 13, 2026
diff --git a/.env b/.env
@@ -1,3 +1 @@
-SKIP_PREFLIGHT_CHECK=true
-NODE_PATH=src/
-REACT_APP_DHIS2_BASE_URL=http://localhost:8989/dhis
+VITE_DHIS2_BASE_URL=http://localhost:8080
diff --git a/.gitignore b/.gitignore
@@ -10,7 +10,7 @@
 # production
 manifest.webapp
 /build
-vaccination-app.zip
+vaccination-app*.zip
 
 # misc
 .DS_Store
@@ -32,3 +32,11 @@ src/locales/
 cypress/screenshots/
 cypress/videos/
 
+src/scripts/dev/
+
+# Yarn 4
+.yarn/cache
+.yarn/install-state.gz
+.yarn/unplugged
+.yarn/build-state.yml
+.pnp.*
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v16.14.0
+v22.22.2
diff --git a/.travis.yml b/.travis.yml
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -0,0 +1 @@
+nodeLinker: node-modules
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+    <head>
+        <meta charset="utf-8" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+
+        <!-- Required by dataset table -->
+        <link
+            type="text/css"
+            rel="stylesheet"
+            href="/includes/material-design-icons/material-icons.css"
+        />
+        <link type="text/css" rel="stylesheet" href="/includes/roboto-font.css" />
+
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+        <meta name="theme-color" content="#000000" />
+        <title>Vaccination App</title>
+
+        <script src="//code.jquery.com/jquery-latest.min.js"></script>
+        <script src="/feedback-tool/feedback.min.js"></script>
+        <script src="/feedback-tool/feedback-github.min.js"></script>
+        <script src="/feedback-tool/feedback-dhis2.min.js"></script>
+
+        <link rel="stylesheet" href="/feedback-tool/feedback.min.css" />
+    </head>
+    <body>
+        <noscript> You need to enable JavaScript to run this app. </noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
+    </body>
+</html>
diff --git a/package.json b/package.json
@@ -1,14 +1,15 @@
 {
     "name": "vaccination-app",
     "description": "DHIS2 MSF Vaccination Campaign App",
-    "version": "2.5.0",
+    "version": "2.6.0-rc.1",
     "license": "GPL-3.0",
     "author": "EyeSeeTea team",
     "homepage": ".",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/eyeseetea/vaccination-app.git"
     },
+    "packageManager": "yarn@4.12.0",
     "dependencies": {
         "@dhis2/app-runtime": "2.11.1",
         "@dhis2/d2-i18n": "^1.0.4",
@@ -24,6 +25,7 @@
         "@material-ui/icons": "4.11.3",
         "@material-ui/styles": "4.11.1",
         "axios": "0.21.1",
+        "buffer": "^6.0.3",
         "classnames": "^2.2.6",
         "d2": "^31",
         "d2-manifest": "^1.0.0",
@@ -34,33 +36,30 @@
         "moment": "^2.22.2",
         "nano-memoize": "^1.0.0",
         "pg": "^8.18.0",
-        "postcss-rtl": "^1.3.2",
         "react": "17.0.2",
         "react-dom": "17.0.2",
         "react-jss": "^8.6.1",
         "react-linkify": "^0.2.2",
         "react-router-dom": "^4.3.1",
-        "react-scripts": "4.0.3",
         "styled-jsx": "3.4.4",
         "typed-html": "^1.0.0"
     },
     "scripts": {
+        "prepare": "corepack enable 2>/dev/null || true",
         "prestart": "yarn localize && d2-manifest package.json manifest.webapp",
-        "start": "react-scripts start",
+        "start": "vite",
         "run-script": "npx tsx",
-        "prebuild": "yarn localize",
         "code-quality": "yarn lint && yarn prettify && yarn test",
-        "build": "rm -rf build/ && d2-manifest package.json manifest.webapp && react-scripts build && yarn run manifest && cp -r i18n icon.png build",
-        "build-webapp": "yarn build && rm -f $npm_package_name.zip && cd build && zip -r ../$npm_package_name-$npm_package_version.zip *",
+        "build": "yarn localize && rm -rf build/ && d2-manifest package.json manifest.webapp && vite build && yarn run manifest && cp -r i18n icon.png build",
+        "build-webapp": "yarn build && rm -f ${npm_package_name}.zip && cd build && zip -r ../${npm_package_name}-${npm_package_version}.zip *",
         "build-data-entry-content-script": "yarn run-script src/scripts/compile-data-entry-content-script.ts",
         "test": "jest",
         "lint": "eslint src cypress",
         "lint:unused": "ts-prune src",
-        "eject": "react-scripts eject",
         "prettify": "prettier \"{src,config,cypress}/**/*.{js,jsx,ts,tsx,json,css}\" --write",
         "extract-pot": "d2-i18n-extract -p src/ -o i18n/",
         "localize": "yarn extract-pot && yarn update-po && d2-i18n-generate -n vaccination-app -p ./i18n/ -o ./src/locales/",
-        "update-po": "yarn extract-pot && for pofile in i18n/*.po; do msgmerge --backup=off -U $pofile i18n/en.pot; done",
+        "update-po": "yarn extract-pot && find i18n/ -name '*.po' -exec msgmerge --no-fuzzy-matching --backup=off -U {} i18n/en.pot \\;",
         "manifest": "d2-manifest package.json build/manifest.webapp",
         "cy:verify": "cypress verify",
         "cy:e2e:open": "CYPRESS_E2E=true cypress open",
@@ -78,8 +77,9 @@
         "@types/classnames": "^2.2.7",
         "@types/jest": "26.0.23",
         "@types/jsdom": "20",
+        "@types/lodash": "4.14.87",
         "@types/md5": "^2.3.5",
-        "@types/node": "^10.12.19",
+        "@types/node": "^22.0.0",
         "@types/pg": "^8.16.0",
         "@types/react": "^16.7.22",
         "@types/react-dom": "^16.0.11",
@@ -88,6 +88,7 @@
         "@typescript-eslint/eslint-plugin": "5",
         "@typescript-eslint/parser": "5",
         "@typescript-eslint/typescript-estree": "4.33.0",
+        "@vitejs/plugin-react": "^4.3.0",
         "babel-core": "6.26.3",
         "babel-eslint": "10.1.0",
         "cmd-ts": "^0.14.3",
@@ -96,16 +97,14 @@
         "enzyme": "^3.7.0",
         "enzyme-adapter-react-16": "^1.6.0",
         "enzyme-to-json": "^3.3.4",
-        "eslint": "7.28.0",
+        "eslint": "8.57.1",
         "eslint-config-prettier": "8.3.0",
-        "eslint-config-react-app": "6.0.0",
+        "eslint-config-react-app": "7.0.1",
         "eslint-plugin-cypress": "2.11.3",
         "eslint-plugin-flowtype": "5.7.2",
-        "eslint-plugin-import": "2.23.4",
+        "eslint-plugin-import": "2.31.0",
         "eslint-plugin-jsx-a11y": "6.4.1",
         "eslint-plugin-prettier": "3.4.0",
-        "eslint-plugin-react": "7.24.0",
-        "eslint-plugin-react-hooks": "4.2.0",
         "eslint-plugin-unused-imports": "^1.1.4",
         "html": "^1.0.0",
         "http-proxy-middleware": "1.3.1",
@@ -116,20 +115,26 @@
         "json-stable-stringify": "^1.3.0",
         "loglevel": "^1.6.1",
         "md5": "^2.3.0",
+        "node-stdlib-browser": "^1",
         "prettier": "2.3.1",
         "prop-types": "^15.6.0",
         "raw-loader": "^3.1.0",
         "sinon": "^7.1.1",
         "ts-jest": "27.0.3",
         "tsx": "3.12.7",
         "typescript": "4.9.3",
+        "vite": "^5.4.0",
+        "vite-plugin-checker": "^0.6.2",
+        "vite-plugin-node-stdlib-browser": "^0.2.1",
         "wait-on": "^3.2.0",
         "xlsx": "^0.18.5"
     },
     "resolutions": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "cmd-ts/chalk": "4.1.2",
-        "cmd-ts/strip-ansi": "6.0.0"
+        "cmd-ts/strip-ansi": "6.0.0",
+        "@types/react": "^16.7.22",
+        "@types/react-dom": "^16.0.11"
     },
     "manifest.webapp": {
         "name": "Vaccination campaign",

diff --git a/public/index.html b/public/index.html
diff --git a/src/components/app/LandingPage.js → src/components/app/LandingPage.jsx b/src/components/app/LandingPage.js → src/components/app/LandingPage.jsx
diff --git a/src/components/app/Root.js → src/components/app/Root.jsx b/src/components/app/Root.js → src/components/app/Root.jsx
diff --git a/src/components/data-entry/DataEntry.jsx b/src/components/data-entry/DataEntry.jsx
@@ -13,7 +13,6 @@ import {
 import { getDhis2Url } from "../../utils/routes";
 import { LinearProgress } from "@material-ui/core";
 import { withPageVisited } from "../utils/page-visited-app";
-import { getCampaignPeriods } from "../../models/CampaignDb";
 
 class DataEntry extends React.Component {
     static propTypes = {

diff --git a/src/components/share/Share.js → src/components/share/Share.jsx b/src/components/share/Share.js → src/components/share/Share.jsx
diff --git a/src/components/steps/disaggregation/DisaggregationStep.tsx b/src/components/steps/disaggregation/DisaggregationStep.tsx
@@ -20,7 +20,7 @@ import SimpleCheckbox from "../../forms/SimpleCheckBox";
 import { DataSet } from "../../../models/config";
 import { CampaignType } from "../../../models/AntigensDisaggregationLegacy";
 
-const { Sidebar } = require("@dhis2/d2-ui-core"); // Untyped
+import { Sidebar } from "@dhis2/d2-ui-core"; // Untyped
 
 type Path = (number | string)[];
 

diff --git a/src/components/utils/page-visited.tsx b/src/components/utils/page-visited.tsx
@@ -3,7 +3,8 @@ import { D2 } from "../../models/d2.types";
 import { DataStore } from "../../models/DataStore";
 import { Maybe } from "../../models/db.types";
 import { isTestEnv } from "../../utils/dhis2";
-const { Store } = require("@dhis2/d2-ui-core");
+
+import { Store } from "@dhis2/d2-ui-core";
 
 type SetComplement<A, A1 extends A> = A extends A1 ? never : A;
 type Subtract<T extends T1, T1 extends object> = Pick<T, SetComplement<keyof T, keyof T1>>;
@@ -54,7 +55,7 @@ export async function getVisitedAndUpdate(
     storeNamespace: string,
     pageKey: string
 ): Promise<boolean> {
-    const state = cache.getState() || {};
+    const state = (cache.getState() || {}) as Record<string, boolean>;
     const fullKey = storeNamespace + "-" + pageKey;
 
     if (isTestEnv()) {

diff --git a/src/index.tsx b/src/index.tsx
@@ -35,8 +35,8 @@ function configI18n(userSettings: { keyUiLocale: string }) {
 }
 
 async function getBaseUrl() {
-    if (process.env.NODE_ENV === "development") {
-        const port = process.env.REACT_APP_PORT || "8081";
+    if (import.meta.env.DEV) {
+        const port = import.meta.env.VITE_PORT || "8081";
         const baseUrl = `http://localhost:${port}/dhis2`;
         console.debug(`[DEV] DHIS2 instance: ${baseUrl}`);
         return baseUrl;

diff --git a/src/models/AntigensDisaggregation.ts b/src/models/AntigensDisaggregation.ts
@@ -27,7 +27,7 @@ import {
 import { getAntigenCodeFromSection } from "../data/CampaignD2Get";
 import { zipShortest } from "../utils/lodash-mixins";
 
-const fp = require("lodash/fp");
+import fp from "lodash/fp";
 
 export type CampaignType = "preventive" | "reactive";
 

diff --git a/src/models/AntigensDisaggregationLegacy.ts b/src/models/AntigensDisaggregationLegacy.ts
@@ -9,7 +9,7 @@ import i18n from "../locales";
 import { assert } from "../utils/assert";
 import { categoriesInDataElement } from "./D2CampaignMetadata";
 
-const fp = require("lodash/fp");
+import fp from "lodash/fp";
 
 export type CampaignType = "preventive" | "reactive";
 

diff --git a/src/models/TargetPopulation.ts b/src/models/TargetPopulation.ts
@@ -12,7 +12,7 @@ import { getDaysRange } from "../utils/date";
 import { assert } from "../utils/assert";
 import { getDataElements } from "./D2CampaignMetadata";
 
-const fp = require("lodash/fp");
+import fp from "lodash/fp";
 
 const dailyPeriodFormat = "YYYYMMDD";
 

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -1,4 +1,4 @@
-/// <reference types="react-scripts" />
+/// <reference types="vite/client" />
 declare module "react/jsx-runtime" {
     export default any;
 }
diff --git a/src/scripts/logging.ts b/src/scripts/logging.ts
@@ -15,15 +15,15 @@ export function setupLogs(options: SetupLoggingOptions) {
     function tee(stream: NodeJS.WriteStream, prefix?: () => string) {
         const originalWrite = stream.write.bind(stream);
 
-        const fn = (chunk: string, encoding: string, cb: Function) => {
-            if (prefix) {
-                logStream.write(prefix());
-            }
+        stream.write = (
+            chunk: string | Uint8Array,
+            encodingOrCb?: BufferEncoding | ((err?: Error | null) => void),
+            cb?: (err?: Error | null) => void
+        ): boolean => {
+            if (prefix) logStream.write(prefix());
             logStream.write(chunk);
-            return originalWrite(chunk, encoding, cb);
+            return originalWrite(chunk, encodingOrCb as BufferEncoding, cb);
         };
-
-        stream.write = fn as typeof stream.write;
     }
 
     const ts = () => `[${new Date().toISOString()}] `;