TypeError: Cannot read properties of undefined (reading 'flush') #3617

krehy · 2024-08-06T15:28:49Z

krehy
Aug 6, 2024

Hi, in the instalation of nextui i got this error:

TypeError: Cannot read properties of undefined (reading 'flush')

my _document.tsx file:

import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document';
import { CssBaseline } from '@nextui-org/react';

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          {CssBaseline.flush()}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

My libraries:

├── @fontsource/teko@5.0.20
├── @fortawesome/fontawesome-svg-core@6.6.0
├── @fortawesome/free-brands-svg-icons@6.6.0
├── @fortawesome/free-solid-svg-icons@6.6.0
├── @fortawesome/react-fontawesome@0.2.2
├── @heroicons/react@2.1.5
├── @nextui-org/react@2.4.6
├── @tailwindcss/typography@0.5.13
├── @types/node@20.14.14
├── @types/react-dom@18.3.0
├── @types/react@18.3.3
├── autoprefixer@10.4.20
├── axios@1.7.3
├── eslint-config-next@14.2.5
├── eslint@8.57.0
├── html-react-parser@5.1.12
├── next@14.2.5
├── postcss@8.4.40
├── react-dom@18.3.1
├── react-headroom@3.2.1
├── react@18.3.1
├── tailwindcss@3.4.7
└── typescript@5.5.4

Kismet333 · 2024-08-22T08:45:38Z

Kismet333
Aug 22, 2024

Today I was trying to upgrade from a NextUI version 1.x for a project that was using the "pages directory setup" and I had the same problem. I was able to figure it out after some research. It seems as though the upgrading to version 2.x instructions are incomplete if you are using this type of set up. It seems that that line of code containing the CssBaseline.flush() should be removed from the _document file. To fix the issue, I just had to literally go into my _document.js (not using typescript for my project) and comment out the line containing:
{CssBaseline.flush()}

I was able to figure this out by making a new, blank NextUI project using version 2.x that is using the "pages directory setup" and compared it to my current project. This was able to show me the difference from its _document.js file vs mine and I saw that that line of code is not there. If you would like to create a basic project as I did to compare your config files with a working project's, just create a new NextJs project, then run the following commands:

npm i @nextui-org/react framer-motion
npm install -g nextui-cli
nextui init -t pages

You can see the steps here https://nextui.org/docs/frameworks/nextjs under the "Pages Directory Setup" section.

Below is my current _document.js file:

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 (

{/* {CssBaseline.flush()} */}

    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
);

}
}

export default MyDocument;

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot read properties of undefined (reading 'flush') #3617

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

TypeError: Cannot read properties of undefined (reading 'flush') #3617

krehy Aug 6, 2024

Replies: 1 comment

Kismet333 Aug 22, 2024

krehy
Aug 6, 2024

Kismet333
Aug 22, 2024