Does not work with React Router v7 + Vite v6

[m0t0r]

NumberFlow version

@number-flow/[email protected]

Framework version

[email protected]

Describe the bug and the steps to reproduce it

Thank you for this great package!

When using Vite v5 everything works as expected, here is the minimal example. But when using Vite v6, I am getting the following error when I select an option

_a2.willUpdate is not a function

TypeError: _a2.willUpdate is not a function
    at NumberFlowImpl.getSnapshotBeforeUpdate (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/@number-flow_react.js?v=190e66b5:543:48)
    at callGetSnapshotBeforeUpdates (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=190e66b5:7860:25)
    at runWithFiberInDEV (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=190e66b5:724:18)
    at commitClassSnapshot (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=190e66b5:7878:26)
    at commitBeforeMutationEffects (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=190e66b5:8183:78)
    at commitRootImpl (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=190e66b5:11045:298)
    at commitRoot (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=190e66b5:10987:93)
    at commitRootWhenReady (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=190e66b5:10475:9)
    at performWorkOnRoot (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=190e66b5:10419:17)
    at performSyncWorkOnRoot (https://stackblitzstartersl3q7s932-vvlz--5173--1b4252dd.local-credentialless.webcontainer.io/node_modules/.vite/deps/react-dom_client.js?v=190e66b5:11446:9)

Minimal reproduction (greatly appreciated)

https://stackblitz.com/edit/stackblitz-starters-l3q7s932?file=app%2Froutes%2Fhome.tsx

[barvian]

Hmm, this is strange because the docs are built with Astro v5 which AFAIK uses Vite 6... Thanks for the repro though!

[barvian]

Alright, here's a workaround. You can add this to your package.json and do another npm install. Clearing your node_modules first might help too:

"overrides": {
    "esm-env": "npm:esm-env-runtime@^0.1.1"
}

The issue seems related to Vite optimizing the deps 🤔

[m0t0r]

That worked for me, thanks!