Vida Zing Comments - Answer Overflow

Vida Zing

•Created by Vida Zing on 10/12/2024 in #questions

UploadButton Error: Cannot read properties of undefined (reading 'match')

If anyone else follows the tutorial, there is a bug in next 14.2 versus the 14.1 this video was made from that prevents redirect('/') from closing your modal dialogs. Took awhile to figure that out 😛

6 replies

TTCTheo's Typesafe Cult

•Created by Vida Zing on 10/12/2024 in #questions

UploadButton Error: Cannot read properties of undefined (reading 'match')

Oh I see this change is made a few minutes later in the video 😢 https://youtu.be/d5x0JCZbAJs?t=3774

6 replies

TTCTheo's Typesafe Cult

•Created by Vida Zing on 10/12/2024 in #questions

UploadButton Error: Cannot read properties of undefined (reading 'match')

I can fix this with "use client" . e.g.

"use client";

import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";
import { UploadButton } from "~/utils/uploadthing";

export function TopNav() {
  return (
    <nav className="w- front-semibold flex items-center justify-between border-b p-4 text-xl font-semibold">
      <div>Gallery</div>

      <div className="flex flex-row">
        <SignedOut>
          <SignInButton></SignInButton>
        </SignedOut>
        <SignedIn>
          <UploadButton endpoint="imageUploader"></UploadButton>
          <UserButton></UserButton>
        </SignedIn>
      </div>
    </nav>
  );
}

"use client";

import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";
import { UploadButton } from "~/utils/uploadthing";

export function TopNav() {
  return (
    <nav className="w- front-semibold flex items-center justify-between border-b p-4 text-xl font-semibold">
      <div>Gallery</div>

      <div className="flex flex-row">
        <SignedOut>
          <SignInButton></SignInButton>
        </SignedOut>
        <SignedIn>
          <UploadButton endpoint="imageUploader"></UploadButton>
          <UserButton></UserButton>
        </SignedIn>
      </div>
    </nav>
  );
}

6 replies

TTCTheo's Typesafe Cult

•Created by Vida Zing on 10/12/2024 in #questions

UploadButton Error: Cannot read properties of undefined (reading 'match')

I tried to debug this. I ended up getting "Error: Cannot access uploadthing.match on the server. You cannot dot into a client module from a server component. You can only pass the imported name through." as an error. I don't know what I did to get it to start passing "^7.0.0" for the check in "function warnIfInvalidPeerDependency(pkg, required, toCheck) {" Is this error a bug or did I do something wrong? This is how I imported it

import { UploadButton } from "~/utils/uploadthing";

import { UploadButton } from "~/utils/uploadthing";

This was the example code file router.

import { auth } from "@clerk/nextjs/server";
import { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";

const f = createUploadthing();

// FileRouter for your app, can contain multiple FileRoutes
export const ourFileRouter = {
  // Define as many FileRoutes as you like, each with a unique routeSlug
  imageUploader: f({ image: { maxFileSize: "4MB" } })
    // Set permissions and file types for this FileRoute
    .middleware(async ({ req }) => {
      // This code runs on your server before upload
      const user = auth();

      // If you throw, the user will not be able to upload
      // eslint-disable-next-line @typescript-eslint/only-throw-error
      if (!user.userId) throw new UploadThingError("Unauthorized");

      // Whatever is returned here is accessible in onUploadComplete as `metadata`
      return { userId: user.userId };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      // This code RUNS ON YOUR SERVER after upload
      console.log("Upload complete for userId:", metadata.userId);

      console.log("file url", file.url);

      // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
      return { uploadedBy: metadata.userId };
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

import { auth } from "@clerk/nextjs/server";
import { createUploadthing, type FileRouter } from "uploadthing/next";
import { UploadThingError } from "uploadthing/server";

const f = createUploadthing();

// FileRouter for your app, can contain multiple FileRoutes
export const ourFileRouter = {
  // Define as many FileRoutes as you like, each with a unique routeSlug
  imageUploader: f({ image: { maxFileSize: "4MB" } })
    // Set permissions and file types for this FileRoute
    .middleware(async ({ req }) => {
      // This code runs on your server before upload
      const user = auth();

      // If you throw, the user will not be able to upload
      // eslint-disable-next-line @typescript-eslint/only-throw-error
      if (!user.userId) throw new UploadThingError("Unauthorized");

      // Whatever is returned here is accessible in onUploadComplete as `metadata`
      return { userId: user.userId };
    })
    .onUploadComplete(async ({ metadata, file }) => {
      // This code RUNS ON YOUR SERVER after upload
      console.log("Upload complete for userId:", metadata.userId);

      console.log("file url", file.url);

      // !!! Whatever is returned here is sent to the clientside `onClientUploadComplete` callback
      return { uploadedBy: metadata.userId };
    }),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

6 replies

Gaming

Programming