[codemod] Unused params Causes next build Failure After Async API Codemod Execution
Nobody has claimed this yet.
- 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
- Create new next app using
next@14bynpx create-next-app@14command. - 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>
)
}
- Run the migration command to
next@15by runningnpx @next/codemod@canary upgrade latest - 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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