Search code examples
typescriptnext.jsclerk

ClerkProvider Error in Nextjs. Attempted import error: 'SWRConfig' is not exported from 'swr'

I just started a new nextjs project installed clerk, set up the env.local and the middleware.ts files. Then I went to wrap the html div with ClerkProvider and got this error when i tried to run it on the localhost.

⨯ ./node_modules/@clerk/shared/dist/react/index.mjs
Attempted import error: 'SWRConfig' is not exported from 'swr' (imported as 'SWRConfig').

Import trace for requested module:
./node_modules/@clerk/shared/dist/react/index.mjs
./node_modules/@clerk/clerk-react/dist/index.mjs
./app/layout.tsx
 GET / 500 in 2222ms

and here is the code.

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/clerk-react";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <header>
            <SignedOut>
              <SignInButton />
            </SignedOut>
            <SignedIn>
              <UserButton />
            </SignedIn>
          </header>
        <body className={inter.className}>{children}</body>
      </html>
    </ClerkProvider>
  );
}

VSCode is pointing to this in the "Problems" tab:

[{
    "resource": "/c:/Users/Owner/OneDrive/Desktop/GitHub/budget-tracker/app/layout.tsx",
    "owner": "typescript",
    "code": "2322",
    "severity": 8,
    "message": "Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & ClerkProviderProps'.\n  Type '{ children: Element; }' is missing the following properties from type 'Without<{ routerPush: RouterFn; routerReplace: RouterFn; routerDebug?: boolean | undefined; } & SignInForceRedirectUrl & SignInFallbackRedirectUrl & ... 5 more ... & { ...; }, \"isSatellite\">': routerPush, routerReplace",
    "source": "ts",
    "startLineNumber": 19,
    "startColumn": 6,
    "endLineNumber": 19,
    "endColumn": 19
}]

I can't find anything online about this issue that is relevant

Solution

  • Make Sure you change import from

    import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/clerk-react";

    to

    import { ClerkProvider, SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/nextjs";