[BUG] - Documentation for usage in Astro is wrong.

mackgorski commented 3 days ago

NextUI Version

2.4.8

Describe the bug

The usage part in Astro says:

---
import Layout from '../layouts/Layout.astro';
import {Button} from '@nextui-org/react';
---

<Layout title="Welcome to Astro.">
  <main>
      <Button color="primary" client:visible>My button</Button>
  </main>
</Layout>

Which is wrong as you cannot use whole bundle imports in Astro for NextUI like import {Button} from '@nextui-org/react' as this always will return build errors like The requested module '@nextui-org/system' does not provide an export named 'Button' I was trying to debug and fight this error off for last two days, and finally I managed to overcome this! The only solution to use NextUI with Astro (latest version) is by importing the components from their respective submodules installed by NextUI CLI like nextui add button and only using @nextui-org/react in tailwind.config.js - const { nextui } = require("@nextui-org/react"); - this requires installing the package naturally.

But then for individual components use you must import them with import { Button } from "@nextui-org/button";

It would be great if you fix the documentation, as I wasted a lot of time debugging this, where the documentation provides the wrong guidance, and there are no other resources talking about this kind of error.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Go to official documentation for usage with Astro
Follow the steps to configure project
Import and use component
Build the project

Expected behavior

As a user I expect the documentation to be thorough and have proper guidance on how to use components in Astro as currently it is misleading and causes a lot of wasted time.

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

linear[bot] commented 3 days ago

ENG-1455 [BUG] - Documentation for usage in Astro is wrong.

Muhammad-Owais-Warsi commented 1 day ago

would love to work on this issue @mackgorski

Muhammad-Owais-Warsi commented 1 day ago

Hey @wingkwong, so basically I just have to make the changes in the usage part here. I'll add: "make sure to install the components using the CLI" and then import them.

Let me know if am misunderstanding something.

wingkwong commented 1 day ago

@Muhammad-Owais-Warsi I'd suggest you to set up a Astro project with NextUI then revise the content.

Muhammad-Owais-Warsi commented 1 day ago

Thanks @wingkwong , I tested out nextUI with astro, I followed up the guide given by the nextUI, and there don’t seem to be any bugs or errors during the build of the project.

 ---
import Login from "../index.tsx"
import {Button} from '@nextui-org/react';
---

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>Astro</title>
    </head>
    <body>
        <h1>Astro</h1>
        <Login client:visible/>
        <main>
            <Button color="primary" client:visible>My button</Button>
        </main>
    </body>
</html>

My custom component.

import { Button } from "@nextui-org/react"
export default function Login() {
    return (
        <>
            <Button>hello</Button>
        </>
    )
}

I think even without using the nextUI CLI it works. However, please feel free to correct me if I’m wrong. Thanks! :)

nextui-org / nextui