Compilation Errors with Next.js 14.2.1 After Upgrade from 14.1.0

[hayato94087]

After upgrading from Next.js version 14.1.0 to 14.2.1, I encountered multiple compilation errors when attempting to build the project. The repository was cloned from https://github.com/jherr/nextjs-declarative-routing

$ pnpm run build

> pokemon@0.1.0 build /Users/hayato94087/Private/nextjs-declarative-routing/finished
> next build

  ▲ Next.js 14.2.1

   Creating an optimized production build ...
Failed to compile.

./src/routes/makeRoute.tsx
Error: 
  x You're importing a component that needs useParams. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
  | Learn more: https://nextjs.org/docs/getting-started/react-essentials
  | 
  | 
   ,-[/Users/hayato94087/Private/nextjs-declarative-routing/finished/src/routes/makeRoute.tsx:3:1]
 3 | */
 4 | import { z } from "zod";
 5 | import {
 6 |   useParams as useNextParams,
   :   ^^^^^^^^^
 7 |   useSearchParams as useNextSearchParams,
 8 | } from "next/navigation";
 9 | import queryString from "query-string";
   `----

  x You're importing a component that needs useSearchParams. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
  | Learn more: https://nextjs.org/docs/getting-started/react-essentials
  | 
  | 
    ,-[/Users/hayato94087/Private/nextjs-declarative-routing/finished/src/routes/makeRoute.tsx:4:1]
  4 | import { z } from "zod";
  5 | import {
  6 |   useParams as useNextParams,
  7 |   useSearchParams as useNextSearchParams,
    :   ^^^^^^^^^^^^^^^
  8 | } from "next/navigation";
  9 | import queryString from "query-string";
 10 | import Link from "next/link";
    `----

  x You're importing a component that needs useRouter. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
  | Learn more: https://nextjs.org/docs/getting-started/react-essentials
  | 
  | 
    ,-[/Users/hayato94087/Private/nextjs-declarative-routing/finished/src/routes/makeRoute.tsx:8:1]
  8 | } from "next/navigation";
  9 | import queryString from "query-string";
 10 | import Link from "next/link";
 11 | import { useRouter } from "next/navigation";
    :          ^^^^^^^^^
 12 | 
 13 | type LinkProps = Parameters<typeof Link>[0];
    `----

Import trace for requested module:
./src/routes/makeRoute.tsx
./src/routes/index.ts
./src/app/layout.tsx


> Build failed because of webpack errors

Steps to Reproduce:

1. Clone the repository https://github.com/jherr/nextjs-declarative-routing
2. Upgrade Next.js from version 14.1.0 to 14.2.1 by modifying the package.json:

{
  "dependencies": {
-   "next": "14.1.0",
+   "next": "14.2.1",
  },
}

3. Install the dependencies.

$ pnpm i

4. Build the project.

$ pnpm build

Repository

You can find the repository where the error can be reproduced here.

https://github.com/hayato94087/nextjs-declarative-routing-issues.

[jherr]

The most recent version of declarative-routing exposes the hooks independently. After you have initialized you will have a README.md in the routes folder than explains how to use the hooks located in hooks.ts. You can also update your code by simply copying the makeRoutes and hooks files from here https://github.com/ProNextJS/declarative-routing/tree/main/assets/nextjs into your repo.

[hayato94087]

Thank you for your reply. I believe that currently, running npx declarative-routing init does not create a README.md file in the routes folder /src/routes. Additionally, DR-README.md lacks the following sections that are included in the template available at: https://github.com/ProNextJS/declarative-routing/blob/main/assets/nextjs/README.md.template

Using typed hooks

The system provides three typed hooks to use in your application usePush, useParams, and useSeachParams.

• usePush wraps the NextJS useRouter hook and returns a typed version of the push function.
• useParams wraps useNextParams and returns the typed parameters for the route.
• useSearchParams wraps useNextSearchParams and returns the typed search parameters for the route.

For each hook you give the route to get the appropriate data back.

import { Search } from "@/routes";
import { useSearchParams } from "@/routes/hooks";

export default MyClientComponent() {
  const searchParams = useSearchParams(Search);
  return <div>{searchParams.query}</div>;
}

We had to extract the hooks into a seperate module because NextJS would not allow the routes to include hooks directly if
they were used by React Server Components (RSCs).

For clarification, it would be helpful if you could update the Pokémon example repository at: https://github.com/jherr/nextjs-declarative-routing.

[hayato94087]

You can reproduce by following commands.

$ pnpm create next-app@latest next-declarative-routing-issue-2 --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app

$ cd next-declarative-routing-issue-2

$ npx declarative-routing init 
Setting up declarative routes for Next.js
✔ What is your source directory? … ./src/app
✔ Where do you want the routes directory? … ./src/routes
✔ Add OpenAPI output? … yes
✔ Done.

Initialization completed successfully
✔ Added 1 .info files to your project.
✔ Added declarative-routing support files in ./src/routes.

Your next step is to read the DR-README.md file and follow the post setup tasks.

$ tree src/routes  
src/routes
├── index.ts
├── makeRoute.tsx
├── openapi.template.ts
└── openapi.ts

1 directory, 4 files

[jherr]

Can you check to make sure you have the latest (0.1.9) version. This has been fixed in the latest version.

[hayato94087]

Oops, I forgot to add @latest. It seems caching was causing an issue. Using npx declarative-routing@latest init, it worked. Thank you!

$ pnpm create next-app@latest next-declarative-routing-issue-3 --typescript --eslint --import-alias "@/*" --src-dir --use-pnpm --tailwind --app
$ cd next-declarative-routing-issue-3
$ npx declarative-routing@latest init
$ tree src/routes  
src/routes
├── README.md
├── hooks.ts
├── index.ts
├── makeRoute.tsx
├── openapi.template.ts
└── openapi.ts

1 directory, 6 files