vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.27k stars 27.02k forks source link

Type error: does not satisfy the constraint 'ParamCheck<RouteContext>' #72525

Open dincerpece opened 2 weeks ago

dincerpece commented 2 weeks ago

Verify canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 32607
  Available CPU cores: 16
Binaries:
  Node: 20.10.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.4-canary.2 // Latest available version is detected (15.0.4-canary.2).
  eslint-config-next: 15.0.3
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: 5.6.3
Next.js Config:
  output: N/A

Which example does this report relate to?

not in templates

What browser are you using? (if relevant)

Chrome 130.0.6723.117

How are you deploying your application? (if relevant)

localhost

Describe the Bug

While I do not have this problem in nextjs 14.1.13, I have problems with apollographql, api side, route.ts in next dev and next build in x.x.1,x.x.2,x.x.3 and the latest canary version, including 15.0.0 and below.

route.ts content:

`import { ApolloServer } from '@apollo/server' import { ApolloServerPluginLandingPageProductionDefault, ApolloServerPluginLandingPageLocalDefault } from '@apollo/server/plugin/landingPage/default' import { NextApiRequest, NextApiResponse } from 'next' import { startServerAndCreateNextHandler } from '@as-integrations/next' import { PrismaClient } from '@prisma/client' import { prisma } from '@/lib/db/prisma' import resolvers from '@/gql/server/resolvers' import typeDefs from '@/gql/server/schemas' import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer' const app = express() const httpServer = http.createServer(app) import express from 'express' import http from 'http'

export type Context = { prisma: PrismaClient token: any res: NextApiResponse cookies: any req: NextApiRequest }

const apolloServer = new ApolloServer({ typeDefs, resolvers, introspection: true, plugins: [ ApolloServerPluginDrainHttpServer({ httpServer }), process.env.NODE_ENV === 'production' ? ApolloServerPluginLandingPageProductionDefault({}) : ApolloServerPluginLandingPageLocalDefault({ embed: true }), ], })

const handleRequest = startServerAndCreateNextHandler(apolloServer, { context: async (req: NextApiRequest, res: NextApiResponse) => { const { cookies } = req const token = cookies?.get('token') return { req, res, prisma, token, cookies, } }, })

export { handleRequest as POST } ` nextjs15-error-2

error content: `.next/types/app/api/na/gql/route.ts:166:7 Type error: Type '{ tag: "POST"; param_position: "second"; param_type: undefined; }' does not satisfy the constraint 'ParamCheck'. Types of property '__param_type__' are incompatible. Type 'undefined' is not assignable to type 'RouteContext'.

164 | Diff< 165 | ParamCheck,

166 | { | ^ 167 | tag: 'POST' 168 | param_position: 'second' 169 | param_type: SecondArg<MaybeField<TEntry, 'POST'>> `

nextjs15-error-1

apollographql related versions: "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "next": "15.0.4-canary.2", "@apollo/client": "^3.11.9", "@apollo/experimental-nextjs-app-support": "^0.11.5", "@apollo/server": "^4.11.2",

nextjs15-error-3

Expected Behavior

I expect it to work as smoothly as in nextjs version 14.

To Reproduce

next build && next start --port 65300

nextjs15-error-4

To get the same error again by doing the next build, the lowest and simplest version is the repo link: https://github.com/dincerpece/nextjs15-apollographql-error

thucpn commented 1 week ago

I got the same issue when using Route Handler.

export async function GET(
  _request: NextRequest,
  { params }: { params: { slug: string[] } },
) {
  const slug = params.slug;

Then I add Promise and it worked:

export async function GET(
  _request: NextRequest,
  { params }: { params: Promise<{ slug: string[] }> },
) {
  const slug = (await params).slug;

https://nextjs.org/docs/app/building-your-application/routing/route-handlers#dynamic-route-segments

dincerpece commented 1 week ago

The problem is that in the @as-integrations/next package, for nextjs15, the response is given as undefined, and this is related to the compatibility in nextjs15. When I did any, it worked! I don't know which apollo or next handles this.

problematic code: github-ss-1

I corrected it to any, the working version: github-ss-2

dincerpece commented 1 week ago

@trevor-scheer, @martinnabhan

svenweb commented 1 week ago

I have just migrated from NextJS 14 to 15 using the app router method. On Windows.

I am having an issue with one of my static routes. It is not dynamic route, but is gettings errors as if it was.

interface Context {
  data: object;
  params: any;
}

export async function POST(request: NextRequest, context: Context) {
  const testBody = await request.json();
....function continues on....
......

When I run: npm run dev it works fine, but when I build with : npm run build it fails to pass linting and checking validity of types. And I get the following error:

PS C:\Users\SJ\Desktop\nextjsProject> npm run build

> build
> next build

   ▲ Next.js 15.0.3
   - Environments: .env

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

.next/types/app/api/myRoute/route.ts:166:7
Type error: Type '{ __tag__: "POST"; __param_position__: "second"; __param_type__: Context; }' does not satisfy the constraint 'ParamCheck<RouteContext>'.
  Types of property '__param_type__' are incompatible.
    Property 'params' is missing in type 'Context' but required in type 'RouteContext'.

  164 |     Diff<
  165 |       ParamCheck<aRouteContext>,
> 166 |       {
      |       ^
  167 |         __tag__: 'POST'
  168 |         __param_position__: 'second'
  169 |         __param_type__: SecondArg<MaybeField<TEntry, 'POST'>>

What I have Tried:

I posted this on StackOverFlow here

JoseSteecky commented 4 hours ago

I'm having the same error

`//import Ably from "ably/promises"; import * as Ably from "ably"; import { NextResponse, type NextRequest } from "next/server"; import { auth } from "@clerk/nextjs/server"; // ensure Vercel doesn't cache the result of this route, // as otherwise the token request data will eventually become outdated // and we won't be able to authenticate on the client side export const revalidate = 0;

export async function GET(req: NextRequest) { try { const userId = (await auth()).userId;

const client = new Ably.Rest(process.env.ABLY_API_KEY as string);
const tokenRequestData = await client.auth.createTokenRequest({
  clientId: userId as string,
});
//{ data: tokenRequestData }
return NextResponse.json({ data: tokenRequestData }); // Correct way to send JSON response

} catch (error) { return NextResponse.json( { error: error || "An error occurred" }, { status: 500 }, ); } } `

error

`Type error: Type '{ tag: "GET"; param_position: "second"; param_type: NextResponse; }' does not satisfy the constraint 'ParamCheck'. Types of property '__param_type__' are incompatible. Property 'params' is missing in type 'NextResponse' but required in type 'RouteContext'.

47 | Diff< 48 | ParamCheck,

49 | { | ^ 50 | tag: 'GET' 51 | param_position: 'second' 52 | param_type: SecondArg<MaybeField<TEntry, 'GET'>>`