Errors with web frontend dependency versions #385
Description
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