Custom _document file example for styled-components throws a TS bug after updating @types/react to ^18.0.0

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:47:26 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T8101
Binaries:
  Node: 17.4.0
  npm: 8.3.1
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.1.4
  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

I’m not entirely sure if it should be posted here or as an issue in the types/SC repo, so sorry if it shouldn’t be here. After updating @types/react to 18.0.0, I started noticing an error in the _documents.tsx file when using this approach for styled components.. I now get an error which says

Class static side 'typeof MyDocument' incorrectly extends base class static side 'typeof Document'.
  The types returned by 'getInitialProps(...)' are incompatible between these types.
    Type 'Promise<{ styles: Element; html: string; head?: (Element | null)[] | undefined; }>' is not assignable to type 'Promise<DocumentInitialProps>'.
      Type '{ styles: JSX.Element; html: string; head?: (JSX.Element | null)[] | undefined; }' is not assignable to type 'DocumentInitialProps'.
        Type '{ styles: JSX.Element; html: string; head?: (JSX.Element | null)[] | undefined; }' is not assignable to type '{ styles?: ReactFragment | ReactElement<any, string | JSXElementConstructor<any>>[] | undefined; }'.
          Types of property 'styles' are incompatible.
            Type 'Element' is not assignable to type 'ReactFragment | ReactElement<any, string | JSXElementConstructor<any>>[] | undefined'.
              Type 'ReactElement<any, any>' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>[]': length, pop, push, concat, and 29 more.ts(2417)

Upon further investigation I discovered that in this part:

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };

the overwrite of styles seems to be causing trouble. styles are of type styles?: ReactFragment | ReactElement<any, string | JSXElementConstructor<any>>[] | undefined instead of JSX.Element. If we downgrade types back to “^17.0.43”, it doesn’t seem to be a problem anymore.

Expected Behavior

Types should work correctly if the example made by SC is still relevant.

To Reproduce

You can create a new project with create next-app --typescript and add the document from the file I linked above, you should see the error immediately.

[rafae2k]

You can fix it by returning an array as follows:

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

I would be glad to contribute an example with types for the use of styled with next.js and Typescript.

Unfortunately, there are no official docs for that.

(Current example with no types)[https://github.com/vercel/next.js/blob/canary/examples/with-styled-components-babel/pages/_document.js]

[javlund]

You can fix it by returning an array as follows:

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

I would be glad to contribute an example with types for the use of styled with next.js and Typescript. Unfortunately, there are no official docs for that. (Current example with no types)[https://github.com/vercel/next.js/blob/canary/examples/with-styled-components-babel/pages/_document.js]

This works but It introduced new warning:

Warning: Each child in a list should have a unique “key” prop. See https://reactjs.org/link/warning-keys for more information. at Head (webpack-internal:///./node_modules/next/dist/pages/_document.js:221:1) at html at Html (webpack-internal:///./node_modules/next/dist/pages/_document.js:186:73) at MyDocument (webpack-internal:///./pages/_document.tsx:14:1)

While I haven’t tried it, I’m guessing that could be fixed with an explicit Fragment tag:

import {Fragment} from "react";
// ...
return {
        ...initialProps,
        styles: [
          <Fragment key="1">
            {initialProps.styles}
            {sheet.getStyleElement()}
          </Fragment>,
        ],
      };