nextui icon indicating copy to clipboard operation
nextui copied to clipboard

[BUG] - Popover is missing in the package leading to undefined error

Open MamounDebbarh opened this issue 2 years ago • 3 comments

Describe the bug

The Popover is missing from the package: @nextui/org/react and from the types : @nextui/org/react/types

This leads to a TypeError: Cannot read properties of undefined (reading 'Trigger') when using Popover.Trigger.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

npm i @nextui-org/react go through the get started setup for next JS Test if Button and Text elements are working (working in my case)

Create the following example Popover from the docs

import { Popover, Button, Text } from "@nextui-org/react";

export default function App() {
  return (
     <Popover>
      <Popover.Trigger>
        <Button auto flat>Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Text css={{ p: "$10" }}>This is the content of the popover.</Text>
      </Popover.Content>
     </Popover>
  );
}

Expected behavior

As a user I expect to see the "open popover" button and the Popover to open when this button is clicked, But I am getting a TypeError: Cannot read properties of undefined (reading 'Trigger').

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

MamounDebbarh avatar Jun 21 '22 11:06 MamounDebbarh

A working sample should be

import { Popover, Button, Text } from "@nextui-org/react";

export default function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button>Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Text css={{ p: "$10" }}>This is the content of the popover.</Text>
      </Popover.Content>
    </Popover>
  );
}

Did you forget to wrap them in <Popover>?

cyanxiao avatar Jun 21 '22 11:06 cyanxiao

A working sample should be

import { Popover, Button, Text } from "@nextui-org/react";

export default function App() {
  return (
    <Popover>
      <Popover.Trigger>
        <Button>Open Popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Text css={{ p: "$10" }}>This is the content of the popover.</Text>
      </Popover.Content>
    </Popover>
  );
}

Did you forget to wrap them in <Popover>?

I did sorry let me edit my post! I didn't wrap the code in a code tag so it was not rendering properly in the OP.

MamounDebbarh avatar Jun 21 '22 11:06 MamounDebbarh

This issue might be related to: https://bytemeta.vip/index.php/repo/nextui-org/nextui/issues/481 I am getting the error Module '"@nextui-org/react"' has no exported member 'Popover' When importing. But I have reinstalled the package so it should be up to date.

MamounDebbarh avatar Jun 21 '22 12:06 MamounDebbarh

Hey @MamounDebbarh the popover was included from version 6, I recommend you check your package.json and verify what version you are using 🙌🏼

jrgarciadev avatar Aug 28 '22 15:08 jrgarciadev