[BUG] - useContext undefined, Seems you forgot to wrap component within the Provider

[TeoConan]

NextUI Version

2.1.13

Describe the bug

I tried to build a simple Dropdown from tutorial on a Astro project, I took note of using client:visible option But I immediately receive this error : useDropdownContext: context is undefined. Seems you forgot to wrap all popover components within <Dropdown />

Links :

• https://nextui.org/docs/components/dropdown
• https://nextui.org/docs/frameworks/astro

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

My complete backtrace :

 error   useDropdownContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Dropdown />`
  File:
    /Users/teo/dev/my-astro/node_modules/@nextui-org/dropdown/dist/chunk-63RZRIL7.mjs:11:35
  Code:
    10 | var DropdownTrigger = forwardRef((props, _) => {
    > 11 |   const { getMenuTriggerProps } = useDropdownContext();
         |                                   ^
      12 |   const { children, ...otherProps } = props;
      13 |   return /* @__PURE__ */ jsx(PopoverTrigger, { ...getMenuTriggerProps(otherProps), children });
      14 | });
  Stacktrace:
ContextError: useDropdownContext: `context` is undefined. Seems you forgot to wrap all popover components within `<Dropdown />`
    at file:///Users/teo/dev/my-astro/node_modules/@nextui-org/dropdown/dist/chunk-63RZRIL7.mjs:11:35
    at renderWithHooks (/Users/teo/dev/my-astro/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderForwardRef (/Users/teo/dev/my-astro/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5846:18)
    at renderElement (/Users/teo/dev/my-astro/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6009:11)
    at renderNodeDestructiveImpl (/Users/teo/dev/my-astro/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/Users/teo/dev/my-astro/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at retryTask (/Users/teo/dev/my-astro/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6532:5)
    at performWork (/Users/teo/dev/my-astro/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6580:7)
    at /Users/teo/dev/my-astro/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6904:12
    at scheduleWork (/Users/teo/dev/my-astro/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:78:3)

My index.astro file

---
import Layout from "../layouts/Layout.astro";
import {
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
  Button,
} from "@nextui-org/react";
---

<Layout title="Welcome to Astro.">
  <main class="container px-auto">
    <div class="py-32">
      <Dropdown>
        <DropdownTrigger>
          <Button variant="bordered">Open Menu</Button>
        </DropdownTrigger>
        <DropdownMenu aria-label="Static Actions">
          <DropdownItem key="new">New file</DropdownItem>
          <DropdownItem key="copy">Copy link</DropdownItem>
          <DropdownItem key="edit">Edit file</DropdownItem>
          <DropdownItem key="delete" className="text-danger" color="danger">
            Delete file
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
  </main>
</Layout>

I tried to put an client:visibleon all component, but I got the same output Maybe my problem come from my installation of NextUI in Astro ? My astro.config.mjs :

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";

import react from "@astrojs/react";

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind(), react()]
});

And my tailwind.config.mjs :

/** @type {import('tailwindcss').Config} */
const { nextui } = require("@nextui-org/react");

export default {
  content: [
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui()],
};

Here my package.json :

"@nextui-org/dropdown": "^2.1.10",
"@nextui-org/react": "^2.1.13",

Usefull links :

• https://github.com/nextui-org/nextui/blob/main/packages/components/dropdown/src/dropdown-context.ts

Expected behavior

I was waited for a working Dropdown like in the tutorial here : https://nextui.org/docs/components/dropdown

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[thesharifi]

@jrgarciadev I am interested in contributing to this repo, can I investigate this issue? then will send the PR

[TeoConan]

I tried to look a bit to understand what happened, there is maybe a problem with the context creation with Astro I tried to set a client:visible as said in the documentation, but it still not working

      <Dropdown client:visible>
        <DropdownTrigger>
          <Button variant="bordered">Open Menu</Button>
        </DropdownTrigger>
        <DropdownMenu aria-label="Static Actions">
          <DropdownItem key="new">New file</DropdownItem>
          <DropdownItem key="copy">Copy link</DropdownItem>
          <DropdownItem key="edit">Edit file</DropdownItem>
          <DropdownItem key="delete" className="text-danger" color="danger">
            Delete file
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>

[ansmlc]

I have a similar issue with useNavbarContext -- trying to use one of the Navbar Menus:

Error:

node:internal/process/promises:288 triggerUncaughtException(err, true /* fromPromise */); ^ Error [ContextError]: useNavbarContext: context is undefined. Seems you forgot to wrap component within <Navbar /> at file:///Volumes/Workspace/astro-me/astro-ts/node_modules/@nextui-org/navbar/dist/chunk-T4GISW4S.mjs:15:45 at renderWithHooks (/Volumes/Workspace/astro-me/astro-ts/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16) at renderForwardRef (/Volumes/Workspace/astro-me/astro-ts/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5846:18) at renderElement (/Volumes/Workspace/astro-me/astro-ts/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6009:11) at renderNodeDestructiveImpl (/Volumes/Workspace/astro-me/astro-ts/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11) at renderNodeDestructive (/Volumes/Workspace/astro-me/astro-ts/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14) at retryTask (/Volumes/Workspace/astro-me/astro-ts/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6532:5) at performWork (/Volumes/Workspace/astro-me/astro-ts/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6580:7) at /Volumes/Workspace/astro-me/astro-ts/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6904:12 at scheduleWork (/Volumes/Workspace/astro-me/astro-ts/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:78:3)

[jashnaik]

I faced similar issues, but the simple fix is to just create a separate file, say dropdown.tsx, in your components folder. Then put the dropdown code in there and just import that file. That should fix the issue.

src/components/Dropdown.tsx

import React from "react";
import {
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
  Button,
} from "@nextui-org/react";

export default function NextUiDropdown() {
  return (
    <Dropdown>
      <DropdownTrigger>
        <Button variant="bordered">Open Menu</Button>
      </DropdownTrigger>
      <DropdownMenu aria-label="Static Actions">
        <DropdownItem key="new">New file</DropdownItem>
        <DropdownItem key="copy">Copy link</DropdownItem>
        <DropdownItem key="edit">Edit file</DropdownItem>
        <DropdownItem key="delete" className="text-danger" color="danger">
          Delete file
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

usage

index.astro

import NextUiDropdown from "../components/Dropdown.tsx";
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  </head>
  <body>
    <Header />
    <main>
      <NextUiDropdown client:visible />
      <p class="text-red-600">Hello</p>
    </main>
    <Footer />
  </body>
</html>

[charlesMYoung]

@jashnaik it seems like there are more steps. I hope it can be simplified. I don't understand, why is this happening?

[mdddj]

some bug

[pansusu]

this bug has not been fixed yet

[Rebooting-Me]

I faced similar issues, but the simple fix is to just create a separate file, say dropdown.tsx, in your components folder. Then put the dropdown code in there and just import that file. That should fix the issue.

src/components/Dropdown.tsx

import React from "react";
import {
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
  Button,
} from "@nextui-org/react";

export default function NextUiDropdown() {
  return (
    <Dropdown>
      <DropdownTrigger>
        <Button variant="bordered">Open Menu</Button>
      </DropdownTrigger>
      <DropdownMenu aria-label="Static Actions">
        <DropdownItem key="new">New file</DropdownItem>
        <DropdownItem key="copy">Copy link</DropdownItem>
        <DropdownItem key="edit">Edit file</DropdownItem>
        <DropdownItem key="delete" className="text-danger" color="danger">
          Delete file
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

usage

index.astro

import NextUiDropdown from "../components/Dropdown.tsx";
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  </head>
  <body>
    <Header />
    <main>
      <NextUiDropdown client:visible />
      <p class="text-red-600">Hello</p>
    </main>
    <Footer />
  </body>
</html>

This solution works fine. Thanks for sharing this! Maybe its because .astro files aren't creating React root dom so libraries built on top of react doms are not being recognized and creating them in .jsx files effectively reads them? Maybe?