CODEWITHSUNDEEP
authenticationnext.jscorst3clerk
Jax Cooper
Jax Cooper

Reputation: 41

Clerk.dev Unhandled Runtime Error, TypeError: Failed to fetch

I am following the official T3 stack tutorial.

I am stuck at clerk authentication. I modified my _app.tsx to the following:

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

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

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

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

export default api.withTRPC(MyApp);

And when I visit my home page: http://127.0.0.1:3000/ or http://localhost:3000/ I get the following error:

enter image description here

Checking the browser console the main (and first) error I see is the following:

Screenshot of the console: enter image description here

Which is a basic CORS block that I can do nothing about client side, it seems.

What am I missing? I am banging my head with this problem for days now and found nothing like this with Google.

This seems to cause clerk not to work at all.

Versions I use for context:

I tried the following so far:

Upvotes: 3

Views: 12051

Answers (3)

Wayne Logan
Wayne Logan

Reputation: 1

I encountered the same issue. I am using clerk in the following setup

 "dependencies": {
    "@clerk/nextjs": "^4.29.12",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
    "lucide-react": "^0.365.0",
    "mongoose": "^8.3.0",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.2.2",
    "tailwindcss-animate": "^1.0.7"
  }

I had already logged into the app via Clerk Google Oauth. At one point, I started encountering the error:

error message in Next JS dev server

I tried using an incognito tab and disabling all Chrome extensions but the error persisted.

I used another browser (Edge) and had to log in. I got a notification on the login screen:

error notification in Clerk

So, Clerk is undergoing maintenance, and when it does, you are only informed of this if you are logged out and trying to log in. If you are already logged in and have an ongoing session, you receive no notification. the Clerk SDK is unable to reach the server (undergoing maintenance) and throws an Error. Hope that helps.

Upvotes: 0

shawncocklin
shawncocklin

Reputation: 3

Same issue with the same project, but I didn't have the HTTPS Everywhere extension. I was able to resolve this by clicking the fetch link in the console to bypass the app and go straight to the Clerk provided log in page and logged back in.

Upvotes: 0

Jax Cooper
Jax Cooper

Reputation: 41

I found an issue with my exact problem in another repo (t3-turbo-and-clerk):

https://github.com/clerkinc/t3-turbo-and-clerk/issues/39

The issue was caused by my HTTPSEverywhere issue. Disabling it on localhost solved my issue.

Leaving it here for other people to find.

Upvotes: 0

Related Questions