I recently started working on a new Next.js project and integrated Clerk into it. I set up the env.local and middleware.ts files before wrapping the HTML div with ClerkProvider. However, when attempting to run the project locally, I encountered the following error:
⨯ ./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
Below is the code snippet causing the issue:
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>
);
}
The VSCode's "Problems" tab flags the following issue:
[{
"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 have been unable to find any relevant information online regarding this specific issue.