Error when using the "Unified (router-agnostic)" imports (Error: Cannot find module '/node_modules/next/navigation'…)

[tordans]

Context

What's your version of nuqs?

    "nuqs": "2.3.1",

What framework are you using?

• ✅ Next.js (app router)
• ✅ Next.js (pages router)

Which version of your framework are you using?

% npx next info

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.2.0: Fri Dec  6 18:40:14 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 22.9.0
  npm: 11.0.0
Relevant Packages:
  next: 14.2.23 // An outdated version detected (latest is 15.1.6), upgrade is highly recommended!
  eslint-config-next: 14.2.23
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.7.3
Next.js Config:
  output: N/A
 ⚠ An outdated version detected (latest is 15.1.6), upgrade is highly recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Description

I migrated from "nuqs": "1.20.0" to "nuqs": "2.3.1" and followed the https://github.com/47ng/nuqs/blob/next/errors/NUQS-404.md docs to use import { NuqsAdapter } from 'nuqs/adapters/next' since we are using both, the pages and app folder.

Error: Cannot find module '/node_modules/next/navigation' imported from /node_modules/nuqs/dist/chunk-S37JZELB.js
Did you mean to import "next/navigation.js"?

I changed the imports to use the separate /app and /pages imports in the corresponding files and the error was gone.

Suggestion

Reevaluate the section https://nuqs.47ng.com/docs/adapters#nextjs-unified of the docs, it looks like that does not work as intended

[franky47]

Thanks for the report, it looks like we need to be smarter and lazy load the correct adapter, as the pages router needs to import from next/navigation.js, and the app router from next/navigation, for some reason (see #368).

That or rework the pages router so that it doesn't use next/navigation at all (which was needed in v1 for compat, but now we can probably base it on top of next/router or something like that).

[franky47]

I tried reproducing the error in the e2e test bench, but I don't see any errors (see PR #878).

I thought I had moduleResolution set to bundler in the tsconfig.json, which might have made a difference, but it's set to node, like in FixMyBerlin/atlas-app (which I assume is the app you were trying to update).

[tordans]

I thought I had moduleResolution set to bundler in the tsconfig.json, which might have made a difference, but it's set to node, like in FixMyBerlin/atlas-app (which I assume is the app you were trying to update).

In this case it was FixMyBerlin/trassenscout https://github.com/FixMyBerlin/trassenscout/blob/develop/tsconfig.json#L19 but that uses "moduleResolution": "node" as well.

[franky47]

@tordans & @rettgerst: There should be a fix for this issue in PR #917 (the pages router adapter now uses next/compat/router.js rather than next/navigation), would you be able to try the preview version?

pnpm add https://pkg.pr.new/nuqs@917

[github-actions]

🎉 This issue has been resolved in version 2.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[jdpnielsen]

@franky47 This error is still happening for me in v2.4.1:

unhandledRejection [Error: Cannot find module '/my-repo/node_modules/next/navigation' imported from /my-repo/node_modules/nuqs/dist/chunk-C3RNEY2H.js
Did you mean to import "next/navigation.js"?] {
  type: 'Error',
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///my-repo/node_modules/next/navigation'
}

I was able to resolve the issue with this patch (using patch-package):

diff --git a/node_modules/nuqs/dist/chunk-C3RNEY2H.js b/node_modules/nuqs/dist/chunk-C3RNEY2H.js
index 3f7c2c6..89d4aa8 100644
--- a/node_modules/nuqs/dist/chunk-C3RNEY2H.js
+++ b/node_modules/nuqs/dist/chunk-C3RNEY2H.js
@@ -1,5 +1,5 @@
 import { debug, renderQueryString } from './chunk-5WWTJYGR.js';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation.js';
 import { useOptimistic, useCallback, startTransition } from 'react';
 
 function useNuqsNextAppRouterAdapter() {

[franky47]

@jdpnielsen thanks, can you try the following preview build (which is basically what your patch did) please?

pnpm add https://pkg.pr.new/nuqs@939

[jdpnielsen]

@jdpnielsen thanks, can you try the following preview build (which is basically what your patch did) please?

pnpm add https://pkg.pr.new/nuqs@939

Tested it, and it works!