roshen Comments - Answer Overflow

@James Perkins I see. From my understanding of the config.matcher property in middleware.ts, it specifies the paths on which the middleware should run. The previous matcher RegEx (/((?!static|.*\\..*|_next|favicon.ico).*)) was filtering out _next, static, favicon.ico and public but matching all other paths right? Wouldn't that mean it should also match tRPC routes? Is there a reason we need to specifically mention that we want it to run on tRPC routes?

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Could you explain why the change in the regex was necessary?

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

@James Perkins Wow, that worked! The error isn't showing up anymore, and the posts are loading and rendering as they should

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

No problem

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Lmao thanks for your help tho, I appreciate it @elpupper

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Just tried it and reinstalled node_modules, the same error is still showing up

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Alright, I'll try it and get back to you

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

It auto-installed the latest stable version, I think

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Here's mine: "@clerk/nextjs": "^4.16.4",

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Hm, I'll try watching further ahead, but I do remember him refreshing the app after making these changes, and the posts loaded without any errors

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Here's what my createTRPCContext function looks like. It isn't the same as yours because I haven't completed the tutorial (encountered the error at timestamp 1:21:28):

import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { prisma } from "~/server/db";
import { getAuth } from "@clerk/nextjs/server";

/**
 * This is the actual context you will use in your router. It will be used to process every request
 * that goes through your tRPC endpoint.
 *
 * @see https://trpc.io/docs/context
 */
export const createTRPCContext = (opts: CreateNextContextOptions) => {
  const { req } = opts;
  const user = getAuth(req); // Clerk auth error (introduced at 1:21:28)

  return {
    prisma,
  };
};

import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { prisma } from "~/server/db";
import { getAuth } from "@clerk/nextjs/server";

/**
 * This is the actual context you will use in your router. It will be used to process every request
 * that goes through your tRPC endpoint.
 *
 * @see https://trpc.io/docs/context
 */
export const createTRPCContext = (opts: CreateNextContextOptions) => {
  const { req } = opts;
  const user = getAuth(req); // Clerk auth error (introduced at 1:21:28)

  return {
    prisma,
  };
};

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Yes, I have that exact function (was created automatically during project initialization)

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

These are the contents of my [trpc].ts file (relative file path: src/pages/api/trpc/[trpc].ts). They haven't been edited since I first initialized the project:

import { createNextApiHandler } from "@trpc/server/adapters/next";

import { env } from "~/env.mjs";
import { createTRPCContext } from "~/server/api/trpc";
import { appRouter } from "~/server/api/root";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  onError:
    env.NODE_ENV === "development"
      ? ({ path, error }) => {
          console.error(
            `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
          );
        }
      : undefined,
});

import { createNextApiHandler } from "@trpc/server/adapters/next";

import { env } from "~/env.mjs";
import { createTRPCContext } from "~/server/api/trpc";
import { appRouter } from "~/server/api/root";

// export API handler
export default createNextApiHandler({
  router: appRouter,
  createContext: createTRPCContext,
  onError:
    env.NODE_ENV === "development"
      ? ({ path, error }) => {
          console.error(
            `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`,
          );
        }
      : undefined,
});

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

I used the Create T3 App tool (npm create t3-app@latest) and made sure to select tRPC in the installation CLI menu. I was skeptical about my installation too initially, so I recreated the entire project from scratch and still reproduced the same error.

72 replies

TTCTheo's Typesafe Cult

•Created by roshen on 4/23/2023 in #questions

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

These are the contents of my _app.tsx file (relative file path: src/pages/_app.tsx):

import { type AppType } from "next/app";

import { api } from "~/utils/api";

import "~/styles/globals.css";
import { ClerkProvider } from "@clerk/nextjs";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <ClerkProvider {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

import { type AppType } from "next/app";

import { api } from "~/utils/api";

import "~/styles/globals.css";
import { ClerkProvider } from "@clerk/nextjs";

const MyApp: AppType = ({ Component, pageProps }) => {
  return (
    <ClerkProvider {...pageProps}>
      <Component {...pageProps} />
    </ClerkProvider>
  );
};

export default api.withTRPC(MyApp);

72 replies

Gaming

Programming