Type error getInitialProps() in class Document

[nix6839]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Apr 2 22:23:49 UTC 2021
Binaries:
  Node: 16.14.2
  npm: 8.6.0
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.6-canary.2
  react: 18.0.0
  react-dom: 18.0.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

The following error occurred in styles in the return part of getInitialProps() in the code below.

Type 'Element' is not assignable to type 'ReactFragment | ReactElement<any, string | JSXElementConstructor<any>>[] | undefined'.

It throws a type error, but in practice it works just fine.
Only errors in @types/react >= 18.0.0.

Expected Behavior

There should be no errors.

To Reproduce

import Document, { DocumentContext, DocumentInitialProps } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

[nix6839]

This appears to have occurred when
type ReactFragment = {} | Iterable<ReactNode>; @types/react@17
was changed to
type ReactFragment = Iterable<ReactNode>; @types/react@18

[nix6839]

It can resolve three ways.

First, change my code to:

return {
  ...initialProps,
  styles: [initialProps.styles, sheet.getStyleElement()],
};

Second and last ways change type of DocumentInitialProps in

next.js/packages/next/shared/lib/utils.ts

Lines 184 to 186 in f73e7d5

	export type DocumentInitialProps = RenderPageResult & {
	styles?: React.ReactElement[] | React.ReactFragment
	}

Second way:

export type DocumentInitialProps = RenderPageResult & {
 styles?: React.ReactElement[] | React.ReactElement
}

However, the first way is blocked.

Last way:

export type DocumentInitialProps = RenderPageResult & {
 styles?: React.ReactElement[] | ReactFragment | React.ReactElement
}

What is better?

[nix6839]

Oh sorry, there is a same issue closed. #36008

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.