I´m trying to use NextUI with the latest version of Next.js 13. Following the official documentation of NextUI I have followed these steps:
- Install NextUI for Next.js
npm i @nextui-org/react
2.Go to pages/_app.js and add this:
// 1. import `NextUIProvider` component
import { NextUIProvider } from '@nextui-org/react';
function MyApp({ Component, pageProps }) {
return (
// 2. Use at the root of your app
<NextUIProvider>
<Component {...pageProps} />
</NextUIProvider>
);
}
export default MyApp;
3.Go to pages/_document.js and add this:
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { CssBaseline } from '@nextui-org/react';
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
styles: React.Children.toArray([initialProps.styles])
};
}
render() {
return (
<Html lang="en">
<Head>{CssBaseline.flush()}</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
After that i run npm run dev command and the console show the following error:
error - ./node_modules/@internationalized/date/dist/import.mjs:1:0
Module not found: Can't resolve '@swc/helpers/src/_class_private_field_init.mjs'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./node_modules/@react-aria/i18n/dist/real-module.js
./node_modules/@react-aria/i18n/dist/module.js
./node_modules/@nextui-org/react/esm/index.js
./pages/_app.js
Does anyone know what might be happening?
I´ve checked and "_class_private_field_init.mjs" is in the right path. And I have also tried reinstalling the node_modules
[email protected]to[email protected], error resolved. Wasn't using NextUI, but instead HeadlessUI. Unsure what the common dependency/issue is though. – Lille