react-router icon indicating copy to clipboard operation
react-router copied to clipboard

Failing to install `@react-router/dev` using `yarn` with Node.js version v20.12.2 due to Vite 7 release

Open alanko0511 opened this issue 10 months ago • 4 comments

Vite 7 was just released a few hours ago (https://vite.dev/blog/announcing-vite7) and it drops support on Node.js versions < 20.19.

I'm using React Router as a...

framework

Reproduction

  1. Fork this repo: https://github.com/alanko0511/rr7-dev-yarn-version (it's a minimal [email protected] app)
  2. Use Node.js version manager like fnm to switch the Node.js version to 20.12.2
  3. Run yarn install using the classic yarn (v1.22.22)
  4. You should see the following error:
error [email protected]: The engine "node" is incompatible with this module. Expected version "^20.19.0 || >=22.12.0". Got "20.12.2"
error Found incompatible module.

System Info

$ npx envinfo --system --npmPackages '{vite,react-router,@react-router/*}' --binaries --browsers

  System:
    OS: macOS 13.0
    CPU: (12) arm64 Apple M2 Pro
    Memory: 89.42 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.local/state/fnm_multishells/54581_1750774976394/bin/node
    Yarn: 1.22.22 - /opt/homebrew/bin/yarn
    npm: 10.5.0 - ~/.local/state/fnm_multishells/54581_1750774976394/bin/npm
  Browsers:
    Chrome: 137.0.7151.120
    Safari: 16.1
  npmPackages:
    @react-router/dev: ^7.6.2 => 7.6.2 
    @react-router/fs-routes: ^7.6.2 => 7.6.2 
    @react-router/node: ^7.6.2 => 7.6.2 
    @react-router/serve: ^7.6.2 => 7.6.2 
    react-router: ^7.6.2 => 7.6.2 
    vite: ^6.3.5 => 6.3.5

Used Package Manager

yarn

Expected Behavior

yarn install should be successful.

Actual Behavior

yarn install fails with the following error:

error [email protected]: The engine "node" is incompatible with this module. Expected version "^20.19.0 || >=22.12.0". Got "20.12.2"
error Found incompatible module.

Since I have some environments that require the use of [email protected] and [email protected], I can't easily upgrade these two versions. To get around this, I have to add a resolutions to the package.json:

  "resolutions": {
    "vite": "^6.3.5"
  }

When I switch to [email protected] to have a successful yarn install, then run yarn why vite, it seems that @react-router/dev doesn't strictly lock the version of vite-node, allowing it to install the latest version of vite:

$ yarn why vite
yarn why v1.22.22
[1/4] 🤔  Why do we have the module "vite"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "vite"
info This module exists because it's specified in "devDependencies".
info Disk size without dependencies: "2.66MB"
info Disk size with unique dependencies: "6.24MB"
info Disk size with transitive dependencies: "6.6MB"
info Number of shared dependencies: 8
=> Found "vite-node#[email protected]"
info This module exists because "@react-router#dev#vite-node" depends on it.
info Disk size without dependencies: "2.31MB"
info Disk size with unique dependencies: "5.89MB"
info Disk size with transitive dependencies: "6.25MB"
info Number of shared dependencies: 8
✨  Done in 0.10s.

alanko0511 avatar Jun 24 '25 14:06 alanko0511

having this issue as well, locking it to Vite 6 works

hyusetiawan avatar Jun 25 '25 00:06 hyusetiawan

vite-node newer than 3.2.0 happily depends on vite 7, so I think if react-router wanted to be helpful out of the box, it could depend on a max of vite-node<=3.1.0 until react-router is compatible with vite 7 itself. This is the commit that relaxed the vite-node dep: https://github.com/vitest-dev/vitest/commit/1716b61c525aded9525f9f8324645ac6c30fc098

Also of note -- this version dep means that right now installing react router installs two versions of vite.

airhorns avatar Jun 25 '25 00:06 airhorns

We added support for Vite 7 in https://github.com/remix-run/react-router/pull/13748 which will be in our next release - you can try that out in 7.6.3-pre.0 currently and see if that works as expected.

As for the node 20.12 issue - I'm unsure if there's anything for us to do there? We don't want to lock into an older version of vite-node that would prevent folks from using vite 7. And everything works as expected on current versions of node 20, so it's just a problem specifically with outdated version of a Node Maintenance LTS release and has a relatively easy workaround via resolutions as mentioned in the description above. That seems like a sufficient solution IMO.

brophdawg11 avatar Jun 25 '25 17:06 brophdawg11

You could consider publishing a minor release first that does restrict the vite-node dependency to vite 6 only, and then land vite 7 support throughout react router in a second release. That would allow folks to restrict their version dependency if they are stuck on vite 6 for a while yet instead of always getting a mixed bag. IMO resolutions is a pretty ugly workaround because it requires someone figuring out that all this is going on in the first place and locking a transitive dependency version which is always a bit spooky.

airhorns avatar Jun 25 '25 21:06 airhorns