ui: NavigationMenu breaks page

Whenever I add any NavigationMenu component to a page, I get these errors:


 ⨯ node_modules\@radix-ui\react-direction\dist\index.mjs (4:82) @ undefined
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at __webpack_require__ (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\webpack-runtime.js:33:42)
    at eval (./src/components/ui/navigation-menu.tsx:18:89)
    at (rsc)/./src/components/ui/navigation-menu.tsx (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\app\page.js:184:1)       
    at __webpack_require__ (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:8:88)
    at (rsc)/./src/app/page.tsx (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\app\page.js:173:1)
    at Function.__webpack_require__ (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\webpack-runtime.js:33:42)
    at async Promise.all (index 0)
null
 ⨯ node_modules\@radix-ui\react-direction\dist\index.mjs (4:82) @ undefined
 ⨯ TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at __webpack_require__ (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\webpack-runtime.js:33:42)
    at __webpack_require__ (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\webpack-runtime.js:33:42)
    at eval (./src/components/ui/navigation-menu.tsx:18:89)
    at (rsc)/./src/components/ui/navigation-menu.tsx (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\app\page.js:184:1)       
    at __webpack_require__ (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:8:88)
    at (rsc)/./src/app/page.tsx (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\app\page.js:173:1)
    at Function.__webpack_require__ (C:\Users\beeta\Desktop\virgin-atlantic\.next\server\webpack-runtime.js:33:42)
null

About this issue

Original URL
State: closed
Created 8 months ago
Reactions: 22
Comments: 15

Most upvoted comments

I had this issue when using NextJS!

What fixed it was adding "use client" to the top of the components/ui/navigation-menu.tsx file.

+52

SamsonStannus on Nov 9, 2023

first why are you using webpack! , the new recomended way is VITE.

are you having this probleme with every component or just NavigationMenu !

also sharing your package.json will help but i recommend trying to update react and react dom and maybe radixui npm update react react-dom

+25

TA9IO on Nov 9, 2023

I have the same issue. navigationMenuTriggerStyle throws an error, even with “use client” at the top of the navigation-menu component.

CyrusVorwald on Jan 22, 2024

I’m guessing you’re all using app router?

shadcn-ui’s internal dependency radix-ui seems to use React context internally in its NavigationMenu components. I don’t think there’s any way to server render them because React context isn’t supported in app router server rendered components. So there’s no easy solution here except replace the component or client-render the menu, unless radix-ui decides to migrate away from using React context.

mpopv on Nov 25, 2023

Yeah this is a problem if you want Navigation on all pages without

adding 'use client' to your root layout, which disabled your ability to use the meta functionality in nextJS
moving your “root” layout down to a new route e.g. domain.com/ is your root html layout and domain.com/home is your actual root layout.
A way to spoof your root layout without adding another URL < this would be ideal but not sure it’s possible to render two layouts at root
A slightly messy but optimal way is to not render your Menu at root layout but, once at root/page.tsx and then once at the next level layout where you can use 'use client' for a layout.
You could just build your own if your nav isn’t too complicated. Just use your URL to track “state” rather than using a hook to highlight or underline your current page

BryanAM on Nov 25, 2023

@beetauri I see the same issue. Have you found a fix?

simibac on Nov 24, 2023

You are doing something very wrong/odd if you need to any of those steps above steps for this situation. I have my root layout as an RSC with my nav rendered from the root layout. You keep your root layout as an RSC but just import the navigation inside of a client component.

For example, this root layout.tsx is a server component and the navigation renders my top and side nav. Part of that nav is RSC (The top nav bar and the mobile sheet that slides in when someone opens the mobile version of the nav) then parts of the nav bar are client components (The avatar and the navigation menu because they both rely on auth to conditionally render)

import 'css/globals.css';
import Navigation from '@/components/navigation';
import { ClerkProvider } from '@clerk/nextjs';
import { ThemeProvider } from '@/lib/providers/themeProvider';
import { Metadata, Viewport } from 'next';
import RootContainer from '@/components/common/rootContainer';
import { Toaster } from '@/components/ui/toaster';
import ReactQueryProvider from '@/lib/providers/reactQueryProvider';
import { GeistSans } from 'geist/font/sans';
import { GeistMono } from 'geist/font/mono';
import { Analytics } from '@vercel/analytics/react';

export const metadata: Metadata = {
  title: 'Home',
  description: 'Home page',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ClerkProvider
    >
      <html
        lang='en'
        suppressHydrationWarning
        className={`${GeistSans.variable} ${GeistMono.variable}`}
      >
        <body>
          <ThemeProvider
            attribute='class'
            defaultTheme='system'
            enableSystem
            disableTransitionOnChange
          >
            <Navigation />
            <Toaster />
            <ReactQueryProvider>
              <RootContainer>{children}</RootContainer>
            </ReactQueryProvider>
          </ThemeProvider>
          <Analytics />
        </body>
      </html>
    </ClerkProvider>
  );
}

You get to pick and choose depending on my your requirements which parts are server and client (https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns). It’s not an all or nothing… I mean it is in some situations but certainly not in this situation.

theonlyway on Nov 26, 2023