I created a generic next.js app (using app router) and added nextui to the app. I added the NextUIProvider component to my RootLayout per the instructions at nextui-org
import {NextUIProvider} from "@nextui-org/react";
...
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<NextUIProvider>
<Header />
{children}
<Footer />
</NextUIProvider>
</body>
</html>
);
}
I then created a file called “Topics.jsx” and added the next-ui grid component (notice that I needed to add the ‘use client’ directive).
But when I run the app, I get the error message: “TypeError: Cannot read properties of undefined (reading ‘Container’)”
'use client'
import {Grid, Card,Text} from "@nextui-org/react";
import "@app/globals.css";
export default function Topics() {
return (
<Grid.Container gap={2} justify="center">
<Grid xs={12} md={6} lg={4}>
<p>Hello world</p>
</Grid>
</Grid.Container>
);
}
Any thoughts?