TypeError: createContext is not a function in Next.js App

I’m working on a Next.js application and encountering a recurring TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function error whenever I try running my app using npm run dev. This error occurs when trying to compile various components, all of which appear related to Radix UI components being utilized within a <ThemeProvider>.

Error Details:

TypeError: (0 , react__WEBPACK_IMPORTED [MODULE_0__].createContext) is not a function
at eval (webpack-internal://...:11:114) ...

Code Details:
The error seems to stem from the integration of Radix UI libraries and possibly how React contexts are implemented within the app. Below is a snippet where one such context is used in the hijraah/src/app/layout.tsx file within a ClerkProvider:

// layout.tsx snippet
import { ClerkProvider } from '@clerk/nextjs';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <Navigation />
          <main>{children}</main>
          <Footer />
        </body>
      </html>
    </ClerkProvider>
  );
}

Attempted Solutions:

  1. Checked and ensured correct imports for createContext from React.
  2. Checked for any potential issues with mismatched React versions across packages.
  3. Restarted the development server after clearing the .next cache.

Expected Outcome:
I expected the application to run without such type errors, especially since createContext should be a defined function imported from React.

**Actual Outcome:}>
The application fails to compile, throwing the mentioned TypeError related to createContext.

Setup:

  • Next.js version: 14.2.3
  • React version across different parts of the app: 18.2.0
  • Usage of Radix UI components and @clerk/nextjs.

Question:
What could be causing this createContext error and how can I resolve it to ensure smooth integration of these UI components within my Next.js application?