7

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:

  1. 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

Alejandro Roldán Pérez
  • 71
  • 1
  • 2

6 Answers6

2

If you will use nextjs version "13.3.0" the issue should be resolved. Important note is that you should use exact version. More info in this comment https://github.com/vercel/next.js/issues/48593#issuecomment-1519914997

aspirisen
  • 965
  • 13
  • 29
2

Upgrading to 13.4.7 worked for me

Steven Matthews
  • 9,705
  • 45
  • 126
  • 232
1

it working well with "next": "13.3.0" version. Try to downgrade the next version.

Karan Goraniya
  • 83
  • 7
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 26 '23 at 14:34
0

Try using the lower version while the bug is being fixed in future releases.

package.json

{
  ...
  "dependencies": {
        "next": "13.2.4",
    ...
    }
}
HereHere
  • 734
  • 1
  • 7
  • 24
0

Try using the lower version while the bug is being fixed in future releases.

package.json:

{
  "dependencies": {
        "next": "13.2.4",
    }
}

then run npm install.

It works in my case.

paleonix
  • 2,293
  • 1
  • 13
  • 29
Said.T
  • 1
0

In your terminal copy and paste

npm install @swc/helpers

The issue should be solved.

Rohit Gupta
  • 4,022
  • 20
  • 31
  • 41
arigbedeOmobolaji
  • 1