RR7 -useQueryState() yields Error: useNavigate() may be used only in the context of a <Router> component.

[ZipBrandon]

Context

What's your version of nuqs?

"nuqs": "2.3.0-beta.2",

What framework are you using?

• ✅ React Router

Which version of your framework are you using?

    "@react-router/node": "^7.1.1",
    "@react-router/serve": "^7.1.1",
    "react-router": "^7.1.1"
    "@react-router/dev": "^7.1.1",

Description

Error: useNavigate() may be used only in the context of a component. This comes from use of useQueryState.

Reproduction

https://github.com/ZipBrandon/rr7-nuqs

Example: Steps to reproduce the behavior:

1. npm i && npm run dev
2. Open the browser and get met with the error (which comes from use of useQueryState in welcome.tsx.

[franky47]

Thanks for the repro! It's weird because it's the exact same setup that I have in the e2e tests for RRv7, and I don't see this message there.

I'll take a closer look tonight.

[franky47]

I followed your instructions, and I cannot reproduce the error:

[ZipBrandon]

@franky47 Ahh, I'm using Node v22.12.0. I installed Node 20 and it works. Node 22+ is broken. It seems this is upstream remix-run/react-router#12475 . I installed Node v22.9.0 as in the reporter and it works as expected.

[franky47]

Confirmed, I was running Node.js 22.11.0, which works. Switching to 22.12.0 shows the error message.

Going to close this since this is an upstream issue in React Router, thanks for figuring it out!