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

Question

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:

• "@clerk/nextjs": "^4.15.0",
• "next": "^13.2.4",
• "@types/node": "^18.15.5",
• "typescript": "^5.0.2"

I tried the following so far:

• Googling the problem, like "clerk failed to fetch", "clerk auth failed to fetch", "clerk auth CORS error", "IsomorphicClerk.loadClerkJS error", I added reddit at the end of the searches as well but I have found nobody experiencing this error
• I purged the project and started over to see if I messed up something in the process but the same happened
• importing ClerkProvider from a different library (@clerk/react - I think)
• Checking clerk dashboard if I can set CORS exceptions, but found nothing, maybe except for the production

Answer 1

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.