I’m trying to make use of Chadcn navigation in my Next.js 14 header compoenent. So I use just the one suggested in the docs:

import {auth} from '@/auth'
 
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu"

const Header = async () => {
    const session = await auth()

    let authContent : React.ReactNode;

    if (session?.user) {
        authContent = <div className="avatar placeholder">
        <div className="bg-neutral text-neutral-content rounded-full w-25">
            
        </div>
      </div> 
    } else {
        authContent =   
             
         <ul className="p-2">
            <li><a>Login</a></li>
            <li><a>Register</a></li>
          </ul>
        
    }
    return ( 

      <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink>Link</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>

 
     );
}
 
export default Header;
<div>
</div>

However I get this error:

 TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
    at eval (webpack-internal:///(rsc)/./node_modules/@radix-ui/react-direction/dist/index.mjs:11:114)
    at (rsc)/./node_modules/@radix-ui/react-direction/dist/index.mjs (/home/me/dev/discuss/.next/server/vendor-chunks/@radix-ui.js:60:1)
    at __webpack_require__ (/home/me/dev/discuss/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./node_modules/@radix-ui/react-navigation-menu/dist/index.mjs:31:83)
    at (rsc)/./node_modules/@radix-ui/react-navigation-menu/dist/index.mjs (/home/me/dev/discuss/.next/server/vendor-chunks/@radix-ui.js:90:1)
    at __webpack_require__ (/home/me/dev/discuss/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/components/ui/navigation-menu.tsx:17:89)
    at (rsc)/./src/components/ui/navigation-menu.tsx (/home/me/dev/discuss/.next/server/app/page.js:443:1)
    at __webpack_require__ (/home/me/dev/discuss/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/components/header.tsx:8:88)
    at (rsc)/./src/components/header.tsx (/home/me/dev/discuss/.next/server/app/page.js:403:1)
    at __webpack_require__ (/home/me/dev/discuss/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./src/app/layout.tsx:12:76)
    at (rsc)/./src/app/layout.tsx (/home/me/dev/discuss/.next/server/app/page.js:359:1)
    at Function.__webpack_require__ (/home/me/dev/discuss/.next/server/webpack-runtime.js:33:42)
    at async e9 (/home/me/dev/discuss/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:396515)
    at async tb (/home/me/dev/discuss/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400212)
    at async tS (/home/me/dev/discuss/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:400773)
    at async tR (/home/me/dev/discuss/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2130)
    at async /home/me/dev/discuss/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2722 {
  digest: '717147068',
  page: '/'
}
 ○ Compiling /_error ...

I’m got stock here. The header itself works fine without this Navigation component. So wondering what is wrong there and how to fix it?

My package.json is like this:

  "dependencies": {
    "@auth/core": "^0.18.1",
    "@auth/prisma-adapter": "^2.1.0",
    "@prisma/client": "^5.14.0",
    "@radix-ui/react-icons": "^1.3.0",
    "@radix-ui/react-navigation-menu": "^1.1.4",
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-react": "^0.379.0",
    "next": "^14.2.3",
    "next-auth": "^5.0.0-beta.3",
    "prisma": "^5.14.0",
    "radix-ui": "^1.0.1",
    "react": "^18",
    "react-dom": "^18",
    "tailwind-merge": "^2.3.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.4.3",
    "typescript": "^5"
  }
}