Errors with web frontend dependency versions

Hi!

When I attempt to install dependencies for the Dynabench web front-end on my machine, a bunch of errors related to incompatible dependency versions come up:

(base) PS C:\Users\Vidminas\GitHub\dynabench\frontends\web> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: Dynabench-frontend@0.1.0
npm ERR! Found: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^5" from react-i18next@15.6.0
npm ERR! node_modules/react-i18next
npm ERR!   react-i18next@"^15.5.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

https://www.i18next.com/overview/typescript says:

The newest i18next versions only support TypeScript v5. Older TypeScript versions are not supported any longer with i18next > v23.
To use it with TypeScript v4, use i18next@22.5.1.

And https://react.i18next.com/latest/typescript says:

Make sure you update to react-i18next >= 13.0.0 and i18next >= 23.0.1

If I downgrade i18next and react-18next to:

"i18next": "^22.5.1",
"react-i18next": "^12",

Then I can get the dependencies to install fine, but this causes downstream type issues when running the project like:

ERROR in src/new_front/pages/Login/LoginPage.tsx:116:19
TS2322: Type 'DefaultTFuncReturn' is not assignable to type 'string | undefined'.
    114 |                   className="focus:outline-none peer block min-h-[auto] w-full rounded border-0 bg-gray-100 px-3 py-[0.32rem] leading-[2.15] outline-none transition-all duration-200 ease-linear"
    115 |                   id="password"
  > 116 |                   placeholder={t("auth:login.password")}
        |                   ^^^^^^^^^^^
    117 |                   onChange={(e) => setPassword(e.target.value)}
    118 |                 />
    119 |                 <label className="mb-20 absolute left-0 -top-3.5 text-letter-color text-sm placeholder-shown:text-base placeholder-shown:text-gray-440 placeholder-shown:top-2 transition-all focus:-top-3.5 focus:text-letter-color focus:text-sm">

If I instead return i18next and react-i18next versions to later ones, and upgrade TypeScript to v5.8.3, then other errors come up because react-scripts doesn't support TypeScript v5. If I ignore incompatibilities by running npm install --legacy-peer-deps, then dependencies install fine and the project seems to work.

There are also some other errors that using npm install --legacy-peer-deps hides, for example:

(base) PS C:\Users\Vidminas\GitHub\dynabench\frontends\web> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-bootstrap-table-next@4.0.3
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!   peer react@">=16.8.0" from @emotion/react@11.11.1
npm ERR!   node_modules/@emotion/react
npm ERR!     @emotion/react@"^11.11.1" from the root project
npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.11.0
npm ERR!     node_modules/@emotion/styled
npm ERR!       @emotion/styled@"^11.11.0" from the root project
npm ERR!       4 more (@mui/material, @mui/styled-engine, @mui/system, material-react-table)
npm ERR!     5 more (@mui/material, @mui/styled-engine, @mui/system, ...)
npm ERR!   58 more (@emotion/styled, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from react-bootstrap-table-next@4.0.3
npm ERR! node_modules/react-bootstrap-table-next
npm ERR!   react-bootstrap-table-next@"^4.0.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@16.14.0
npm ERR! node_modules/react
npm ERR!   peer react@"^16.3.0" from react-bootstrap-table-next@4.0.3
npm ERR!   node_modules/react-bootstrap-table-next
npm ERR!     react-bootstrap-table-next@"^4.0.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

The last release of react-bootstrap-table-next was 5 years ago. There is a community version updated for React v18: https://www.npmjs.com/package/fad-react-bootstrap-table-next

Start in frontends/web's dependency manifest and reproduce the problem with npm install. Review the TypeScript, react-i18next, react-bootstrap-table-next, and react-scripts versions, then verify the existing LoginPage.tsx type error and the frontend build. Done means dependencies install without legacy-peer-deps and the project builds successfully.