Error when importing from "next-typesafe-url/pages"

[Sturlen]

Applies only to dynamic routes and specifically when using the hooks imported from "next-typesafe-url/pages". Static routes work like charm.

Full node error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'F:\Projects\next-url-repro\node_modules\next\router' imported from F:\Projects\next-url-repro\node_modules\next-typesafe-url\dist\pages.mjs   
Did you mean to import next-url-repro/node_modules/next/router.js?
    at new NodeError (node:internal/errors:393:5)
    at finalizeResolution (node:internal/modules/esm/resolve:305:11)
    at moduleResolve (node:internal/modules/esm/resolve:866:10)
    at defaultResolve (node:internal/modules/esm/resolve:1074:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:425:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  digest: undefined
}

Using create-t3-app.
Happens when using npm and pnpm.
Same result when running in CodeSandbox.

Repro of the issue

Available as github repo: https://github.com/Sturlen/next-url-repro

Steps

• npm i
• npm dev
• Go to http://localhost:3000/posts/123
• Page load fails and displays error

[ethanniser]

Thank you for reporting this bug, I am looking into it

[ethanniser]

im really confused

in next-typesafe-url/pages.mjs all its importing is

import { useRouter } from "next/router";

the file its trying to find exists

and that exact same import works in a non library file:

import { type DynamicRoute } from "next-typesafe-url";
// import { useSearchParams } from "next-typesafe-url/pages"; //this import fails
import { useRouter } from "next/router";
import { z } from "zod";

const Route = {
  searchParams: z.object({
    postId: z.number().optional(),
  }),
} satisfies DynamicRoute;
export type RouteType = typeof Route;

export default function PostPage() {
  // const { data } = useSearchParams(Route.searchParams);
  // return <div>{data && <p>{data.postId ?? "none"}</p>}</div>;
  const router = useRouter();
  const { postId } = router.query;
  return <div>{postId && <p>{postId}</p>}</div>;
}

^^^ No Errors

---

also in the example apps in the main repo this problem does not exist

all very very strange

do you have any ideas?

[Sturlen]

Afraid I'm stumped by this as well 😅. Only idea I have is that might be related to the build output or module system doing something strange.

[ericvoshall]

Having the same issue - I was able to resolve it by adding transpilePackages: ['next-typesafe-url'] to my next.config.js.

[ethanniser]

thanks for sharing
I still am puzzled by the issue, and why that fixes it but good to know it does