vercel / vercel/next.js

[codemod] Unused params Causes next build Failure After Async API Codemod Execution

Open
#73,296 3 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug Output
Dominant language
JavaScript
Stars
142k
Forks
32.5k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/CastaChick/next_codemod_example

To Reproduce
  1. Create new next app using next@14 by npx create-next-app@14 command.
  2. Add new pages with/without unused params

app/example-unused-params/[id]/page.tsx

interface ExampleUnusedParamsProps {
   params: {
        id: string;
   }
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export default function ExampleUnusedParams({params}: ExampleUnusedParamsProps) {
  return (
    <div>foo</div>
  )
}

app/example-used-params/[id]/page.tsx

interface ExampleUsedParamsProps {
   params: {
        id: string;
   }
}

export default function ExampleUsedParams({params}: ExampleUsedParamsProps) {
  console.log(params.id)
  return (
    <div>foo</div>
  )
}
  1. Run the migration command to next@15 by running npx @next/codemod@canary upgrade latest
  2. Then build the next app by running npm run build ← build failed
src/app/example-unused-params/[id]/page.tsx
Type error: Type 'ExampleUnusedParamsProps' does not satisfy the constraint 'PageProps'.
  Types of property 'params' are incompatible.
    Type '{ id: string; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag]
Current vs. Expected behavior

In Pull Request #71664 , it appears that transform is not executed when params is not accessed within a function. However, even if params is not used within the function, the build process (next build) will fail if params is not wrapped in a Promise.

To ensure developers can confidently build their projects after running npx @next/codemod@canary next-async-request-api ., I suggest either removing this behavior or ignoring unused, synchronously declared params during the build process. This adjustment would provide a smoother and more reliable development experience.

Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6030
  Available memory (MB): 36864
  Available CPU cores: 12
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: 1.22.22
  pnpm: N/A
Relevant Packages:
  next: 15.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: 15.0.3
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: 5.7.2
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Developer Experience, Output (export/standalone)

Which stage(s) are affected? (Select all that apply)

next build (local)

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked reproduction, especially app/example-unused-params/[id]/page.tsx, and run the stated next@14 to next@15 codemod followed by npm run build. Read the transform behavior discussed in PR #71664 and compare pages with used and unused params. Done means the codemod leaves the project in a state where next build succeeds without requiring unused synchronous params to be manually changed.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, typescript
Domain
build-system, developer-experience
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.