[bug]: Consistent createContext error when compiling navigation-menu under NextJS.

[eaoliver]

Describe the bug

I'm consistently encountering the following error when building the navigation-menu component:

Collecting page data .TypeError: (0 , l.createContext) is not a function

Affected component/components

navigation-menu

How to reproduce

The bug can be produced using the following steps:

pnpm create next-app@latest my-app --typescript --tailwind --eslint
pnpm dlx shadcn-ui@latest init
pnpx v0 add lJ0ED2F9Ny2

Then move and rename the v0 generated component to src/app/page.tsx and then:

pnpm build

Codesandbox/StackBlitz link

No response

Logs

eaoliver@Voracious my-app % pnpm build

> my-app@0.1.0 build /Users/eaoliver/my-app
> next build

  ▲ Next.js 14.2.3

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
   Collecting page data  ...TypeError: (0 , l.createContext) is not a function
    at 3355 (/Users/eaoliver/my-app/.next/server/app/page.js:16:32124)
    at t (/Users/eaoliver/my-app/.next/server/webpack-runtime.js:1:127)
    at 6628 (/Users/eaoliver/my-app/.next/server/app/page.js:1:1036)
    at t (/Users/eaoliver/my-app/.next/server/webpack-runtime.js:1:127)
    at r (/Users/eaoliver/my-app/.next/server/app/page.js:26:32934)
    at /Users/eaoliver/my-app/.next/server/app/page.js:26:32965
    at t.X (/Users/eaoliver/my-app/.next/server/webpack-runtime.js:1:1191)
    at /Users/eaoliver/my-app/.next/server/app/page.js:26:32947
    at Object.<anonymous> (/Users/eaoliver/my-app/.next/server/app/page.js:26:32992)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)

> Build error occurred
Error: Failed to collect page data for /
    at /Users/eaoliver/my-app/node_modules/.pnpm/next@14.2.3_react-dom@18.3.1_react@18.3.1/node_modules/next/dist/build/utils.js:1268:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data  . ELIFECYCLE  Command failed with exit code 1.

System Info

node v20.8.0

Package.json:
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-dialog": "^1.0.5",
    "@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.378.0",
    "next": "14.2.3",
    "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",
    "eslint": "^8",
    "eslint-config-next": "14.2.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[eaoliver]

The issue is resolved by adding "use client" to the unedited navigation-menu.tsx file.

[eaoliver]

Closing this issue as it's not really a bug. However, given the tight integration between v0 and NextJS, it might be worth checking if a nextjs project when installing the navigation-menu component.