Error in Documentation for _document.tsx #441

anoushk1234 · 2022-04-29T09:54:48Z

Describe the bug

heres the code from the docs

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

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

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

export default MyDocument;

i get a type error at this line styles: <>{initialProps.styles}</>, saying Type 'Element' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>[] | ReactFragment | undefined'

if i remove the <> </> it doesnt show a type error and it works

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Follow the nextjs guide in the docs https://nextui.org/docs/guide/getting-started#nextjs

Expected behavior

the documentation should have the correct code

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Firefox

The text was updated successfully, but these errors were encountered:

tianenpang · 2022-04-29T16:04:02Z

Hey @anoushk1234 I don't think it's a issue with NextUI.

My solution is to use React.Children.toArray I'm not sure if there's a better way.

Reference: vercel/next.js#36008 (comment)

Example: https://codesandbox.io/s/next-ui-ts-bf0t1z

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

const MyDocument = () => {
  return (
    <Html>
      <Head>{CssBaseline.flush()}</Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
};


MyDocument.getInitialProps = async (context) => {
  const initialProps = await Document.getInitialProps(context);

  return {
    ...initialProps,
    styles: [ ...Children.toArray(initialProps.styles) ]
  };
};

anoushk1234 · 2022-04-30T05:42:08Z

Hey @anoushk1234 I don't think it's a issue with NextUI.

My solution is to use React.Children.toArray I'm not sure if there's a better way.

Reference: vercel/next.js#36008 (comment)

Example: https://codesandbox.io/s/next-ui-ts-bf0t1z

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

const MyDocument = () => {
  return (
    <Html>
      <Head>{CssBaseline.flush()}</Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
};


MyDocument.getInitialProps = async (context) => {
  const initialProps = await Document.getInitialProps(context);

  return {
    ...initialProps,
    styles: [ ...Children.toArray(initialProps.styles) ]
  };
};

hey, if it's not an issue with the defined types then the documentation needs to be update because styles: <>{initialProps.styles}</>, doesn't work

jrgarciadev · 2022-05-02T01:38:24Z

Hey @anoushk1234 could you please share with us your tsconfig.json?

anoushk1234 · 2022-05-02T05:19:44Z

Hey @anoushk1234 could you please share with us your tsconfig.json?

Yes sure, here you go https://github.com/anoushk1234/anoushk.xyz/blob/main/tsconfig.json

NayamAmarshe · 2022-05-04T06:00:14Z

Here's how I fixed it:

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

class MyDocument extends Document {
  static async getInitialProps(ctx: any) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: [<>{initialProps.styles}</>],
    };
  }

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

export default MyDocument;

anoushk1234 · 2022-05-04T07:39:04Z

Here's how I fixed it:

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

class MyDocument extends Document {
  static async getInitialProps(ctx: any) {
    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      styles: [<>{initialProps.styles}</>],
    };
  }

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

export default MyDocument;

ohk got it, I'll update the docs with this code

marcoripa96 · 2022-05-04T19:17:30Z

This doesn't work for me. React throws a warning for duplicate keys when using an array. I'm ignore ts typechecking at the moment.

anoushk1234 added the 🐛 Type: Bug Something isn't working label Apr 29, 2022

anoushk1234 mentioned this issue May 4, 2022

Update getting-started.mdx #452

Merged

jrgarciadev closed this as completed in #452 May 8, 2022

NayamAmarshe mentioned this issue May 9, 2022

Updated _document.tsx code to remove errors #463

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error in Documentation for _document.tsx #441

Error in Documentation for _document.tsx #441

anoushk1234 commented Apr 29, 2022

tianenpang commented Apr 29, 2022 •

edited

anoushk1234 commented Apr 30, 2022

jrgarciadev commented May 2, 2022

anoushk1234 commented May 2, 2022

NayamAmarshe commented May 4, 2022 •

edited

anoushk1234 commented May 4, 2022

marcoripa96 commented May 4, 2022

Error in Documentation for _document.tsx #441

Error in Documentation for _document.tsx #441

Comments

anoushk1234 commented Apr 29, 2022

Describe the bug

Your Example Website or App

Steps to Reproduce the Bug or Issue

Expected behavior

Screenshots or Videos

Operating System Version

Browser

tianenpang commented Apr 29, 2022 • edited

anoushk1234 commented Apr 30, 2022

jrgarciadev commented May 2, 2022

anoushk1234 commented May 2, 2022

NayamAmarshe commented May 4, 2022 • edited

anoushk1234 commented May 4, 2022

marcoripa96 commented May 4, 2022

tianenpang commented Apr 29, 2022 •

edited

NayamAmarshe commented May 4, 2022 •

edited