Need To Use Plugin with Vite Version 4.0

[DragonOsman]

I have a MERN app I'm trying to deploy to Glitch, which only supports Node up to version 16.x. I want to switch from CRA to Vite in my project, but I'm having dependency resolution issues in NPM.

Here are the messages with the commands I ran:

npm install vite @vitejs/plugin-react-swc vite-tsconfig-paths vite-plugin-svgr
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @types/[email protected]
npm ERR! node_modules/@types/node
npm ERR!   @types/node@"^16.18.34" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @types/node@"^18.0.0 || >=20.0.0" from [email protected]
npm ERR! node_modules/vite
npm ERR!   vite@"*" from the root project
npm ERR!   peer vite@"^4 || ^5" from @vitejs/[email protected]
npm ERR!   node_modules/@vitejs/plugin-react-swc
npm ERR!     @vitejs/plugin-react-swc@"*" from the root project
npm ERR!   2 more (vite-plugin-svgr, vite-tsconfig-paths)
npm ERR!
npm ERR! Conflicting peer dependency: @types/[email protected]
npm ERR! node_modules/@types/node
npm ERR!   peerOptional @types/node@"^18.0.0 || >=20.0.0" from [email protected]
npm ERR!   node_modules/vite
npm ERR!     vite@"*" from the root project
npm ERR!     peer vite@"^4 || ^5" from @vitejs/[email protected]
npm ERR!     node_modules/@vitejs/plugin-react-swc
npm ERR!       @vitejs/plugin-react-swc@"*" from the root project
npm ERR!     2 more (vite-plugin-svgr, vite-tsconfig-paths)
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.
npm ERR!
npm ERR! See C:\Users\Osman\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Osman\AppData\Local\npm-cache\_logs\2024-07-10T19_38_55_919Z-debug-0.log

Then, after that:

npm install [email protected]  @vitejs/[email protected] [email protected] [email protected]
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   vite@"4.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^2.6.0" from [email protected]
npm ERR! node_modules/vite-plugin-svgr
npm ERR!   vite-plugin-svgr@"2.0.0" 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.
npm ERR!
npm ERR! See C:\Users\Osman\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Osman\AppData\Local\npm-cache\_logs\2024-07-10T20_23_26_936Z-debug-0.log

So, with that context, I guess my question should be: what exact versions of each package should I use? I want to avoid running the command with the `--legacy-peer-deps" flag if possible.

Sorry if this isn't a question to ask here. And thanks in advance for any help or advice.

Edit to further clarify: I'm using Windows 10, and I installed NVM for Windows to be able to switch between the latest LTS version of Node and version 16.

[cavalloTNguyen]

If you're running in a Node 16 environment, you'll have to use Vite 4.x; Vite 5.x does not support Node 16 anymore.

https://vitejs.dev/blog/announcing-vite5#node-js-support

I don't think you should run into any problems downgrading to vite 4.x

If you specify just the major version, your installer should resolve the minor and patch versions to latest, ie, npm i vite@4

[revelt]

@DragonOsman can we close this issue?