vercel / next.js

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

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

Open dincerpece opened 5 days ago

dincerpece commented 5 days 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 day 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 22 hours 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 22 hours ago

@trevor-scheer, @martinnabhan