404 Not Found when rendering <UploadButton>

When I render <UploadButton> I get the error GET http://localhost:3000/uploadthing 404 (Not Found). I've setup the route in my fastify instance that is running on port 3000(other routes from fastify works). I've been thinking for this for a while and want to ask before I start to dig into the source code of uploadthing.

await fastify.register(createRouteHandler, {
  router: uploadRouter,
  config: {
    isDev: env.NODE_ENV === "development",
    uploadthingId: env.UPLOADTHING_APP_ID,
    uploadthingSecret: env.UPLOADTHING_SECRET,
    logLevel: "debug",
  },
});


import { type FileRouter, createUploadthing } from "uploadthing/fastify";

const f = createUploadthing();

export const uploadRouter = {
    imageUploader: f({
        image: {
            maxFileSize: "4MB",
            maxFileCount: 1,
        },
    }).onUploadComplete((data) => {
        console.log("upload completed", data);
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof uploadRouter;
image.png
Was this page helpful?