Next-Axiom Typescript Issues

[YourAverageTechBro]

I am getting an error with the following NextJS 13 Route Handler endpoint.

export const POST = withAxiom(
  async (
    req: AxiomRequest,
    { params }: { params: { chatConversationId: string } }
  ) => {
...
}

The file path for this is chatConversation/[chatConversationId]/route.ts, so the error seems to be the fact that I am trying to access the params in the dynamic route segment in NextJS.

When deploying this to Vercel, I get the following error:

Invalid configuration "POST":
    Expected "Function", got "NextConfig".

The POST function seems to return a NextConfig when passing in the params whereas in my other routes that do not have dynamic route segments it returns a NextHandler.

How do I fix this?

[dasfmi]

hi @YourAverageTechBro , looks like we didn't take dynamic segments into account, the problem comes from this type def. For now, I think maybe you can create your own version of the withAxiomRouteHandler with the correct type for dynamic segments until we land a fix for it.

[amrdraz]

I have a different type issue

I use NextRequest

request.cookies.get("session")?

I get the following error

Property 'cookies' does not exist on type 'AxiomRequest'.
  Property 'cookies' does not exist on type 'Request & { log: Logger; }'

I'm reading the code in the repo and I don't find Request

but in the npm package I have I see AxiomRequest defined as

type AxiomRequest = (AxiomRequest | Request) & { log: Logger; }

any idea why is taht

I checked and I'm on 1.0.0-rc.1 same as the current main at the time of this message

[amrdraz]

⚠️ ignore this comment it runs out I never actually used response as a second argument and no documentation supports it

I'm keeping this comment for my shame
but my previous comment was a valid one

I also had another problem whenever I passed withAxiomRouteHandler(function (req, res) {})

Type error: Argument of type '(request: AxiomRequest, response: NextResponse) => Promise<NextResponse>' is not assignable to parameter of type 'NextHandler'.
  16 | 
> 17 | export const POST = withAxiomRouteHandler(async function POST(
     |                                                          ^
  18 |   request: AxiomRequest,
  19 |   response: NextResponse,
  20 | ) {

fixed my issues it by patching withNext.d.ts to

import { NextConfig } from 'next';
import { Logger } from './logger';
import { type NextRequest, type NextResponse } from 'next/server';
declare global {
    var EdgeRuntime: string;
}
export declare function withAxiomNextConfig(nextConfig: NextConfig): NextConfig;
export type AxiomRequest = (NextRequest) & {
    log: Logger;
};
type NextHandler = (req: AxiomRequest, res: NextResponse) => Promise<Response> | Promise<NextResponse> | NextResponse | Response;
export declare function withAxiomRouteHandler(handler: NextHandler): (req: NextRequest) => Promise<Response | NextResponse<unknown>>;
export declare function withAxiom(param: NextConfig): NextConfig;
export declare function withAxiom(param: NextHandler): NextHandler;
export {};

note

type NextHandler = (req: AxiomRequest) => Promise<Response> | Promise<NextResponse> | NextResponse | Response;

became

type NextHandler = (req: AxiomRequest, res: NextResponse) => Promise<Response> | Promise<NextResponse> | NextResponse | Response;

[bahlo]

Hey, we're looking into this right now, thanks for reporting!