Error while creating a mutation in NextJS

"message": "No \"query\"-procedure on path \"checkout.stripe\"",
"code": -32004,

"message": "No \"query\"-procedure on path \"checkout.stripe\"",
"code": -32004,

import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";

export const checkoutRouter = createTRPCRouter({
  stripe: publicProcedure.mutation(() => {
    return "Hello";
  }),
});

import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";

export const checkoutRouter = createTRPCRouter({
  stripe: publicProcedure.mutation(() => {
    return "Hello";
  }),
});

import { exampleRouter } from "@/server/api/routers/example";
import { imageRouter } from "@/server/api/routers/image";
import { checkoutRouter } from "@/server/api/routers/checkout";
import { createTRPCRouter } from "@/server/api/trpc";

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
  example: exampleRouter,
  image: imageRouter,
  checkout: checkoutRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;

import { exampleRouter } from "@/server/api/routers/example";
import { imageRouter } from "@/server/api/routers/image";
import { checkoutRouter } from "@/server/api/routers/checkout";
import { createTRPCRouter } from "@/server/api/trpc";

/**
 * This is the primary router for your server.
 *
 * All routers added in /api/routers should be manually added here.
 */
export const appRouter = createTRPCRouter({
  example: exampleRouter,
  image: imageRouter,
  checkout: checkoutRouter,
});

// export type definition of API
export type AppRouter = typeof appRouter;