v1.8.0-beta.12 import issue

[jdddog]

Is it possible to use the Next.js pages router with next-usequerystate v1.8.0-beta.12?

I'm using Next 13.4.19 and get the following error when useQueryState is called from within a component:

error Error [ERR_MODULE_NOT_FOUND]: 
Cannot find module '/path/to/project/node_modules/next/navigation' 
imported from /path/to/project/node_modules/next-usequerystate/dist/index.js

[franky47]

Thanks for your report, it looks like this can be fixed by importing from next/navigation.js in library code (for some reason importing without the extension works in app code). 1.8.0-beta.13 includes this change, can you try it to see if it fixes your issue?

Related issues on Next.js:

• [NEXT-779] next/* - Typescript cannot find module when moduleResolution=nodenext and type=module vercel/next.js#46078
• [NEXT-1281] Support moduleResolution bundler in tsconfig.json vercel/next.js#47858

[jdddog]

That works for me, thanks for fixing it @franky47!

[luixo]

@franky47
Hello,
It seems like this change did break the app in my use case.

My setup is Next.js 14 + tRPC (which runs some SSR prepasses with a corresponding attribute on).
The SSR prepass is the location when it goes wrong - app crashes with invariant expected app router to be mounted error (which basically means we don't have AppRouterContext in react scope). This only applies to SSR, if I render page without useQueryState hook on SSR and navigate to the problematic page client-side - there is not problem.

It happens because there are two different contexts - one from "next/navigation" (the one that actually exists in scope) and one from "next/navigation.js" (the one expected by hook in useQueryState).

To illustrate this example, I wrote this code in my custom hook:

import { useRouter } from "next/navigation";
import { useRouter as useRouterJs } from "next/navigation.js";

console.log("Are the same?", useRouterJs === useRouter); // false server-side, true client-side

My Node.js debugger links those functions to different instances of navigation.js file, one has link webpack-internal:///node_modules/next/dist/client/components/navigation.js and another has file:///<my-app>/node_modules/next/dist/client/components/navigation.js.

I suspect something's happening around the bundle.
Can you help me tackle the problem?

My current (temporary) solution is to patch the library and pass my own useRouter and useSearchParams, but it is not sustainable.

[franky47]

That is a wild bug indeed. Would you mind opening a dedicated issue with your context for better tracking?

Probably not much we can do here if it's a Next.js bundling issue and/or a tRPC specific thing, but at least we can document better how to iterate on a fix.