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

[ppuzio]

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.

[yerffejytnac]

Chiming in because I am experiencing the same error after upgrading.

[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]

[ppuzio]

One thing should be noted: if you're using

  compiler: {
    styledComponents: true,
  },

in next.config.js, then you don't need _document.tsx and this doesn't concern you ;) I think the info about this file being redundant was added recently.

[javlund]

One thing should be noted: if you're using

  compiler: {
    styledComponents: true,
  },

in next.config.js, then you don't need _document.tsx and this doesn't concern you ;) I think the info about this file being redundant was added recently.

Unfortunately, this doesn't seem to be the case; not for me at least. I'm getting a FOUC even with

  compiler: {
    styledComponents: true,
  }

unless I have a _document.tsx with the boilerplate getInitialProps. Would love to get rid of it though.

[imaksp]

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)

[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>,
        ],
      };

[imaksp]

@javlund Hi adding an explicit fragment tag & a key fixed that error but it introduced new TS error:

This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided

Also getting another TS error in react date picker lib, so I am reverting to old react typings for now.

[balazsorban44]

The reported issues here are coming from upstream/third-party libraries, and are not related to Next.js. These should be reported on the respective repositories.

Some useful links:

• Suggestions from Twitter by Dan Abramov
• Bug: React 18 types broken since the type release a view hours ago facebook/react#24304 (comment)
• DefinitelyTyped react issues/PRs since React 18 types have been merged (follow this, your lib might add a fix if it's on DefinitelyTyped)

I'm closing this for now. If you still think there is a problem with Next.js itself, please provide a reproduction in a new issue so we can look more into it.

[imaksp]

@javlund your suggestion with <Fragment> works perfectly after running

npx yarn-deduplicate --packages @types/react
yarn

Actually React date picker lib has mentioned "@types/react": "*" in dependency so it might have caused the issue (found from React issue in above comment)

But with this I think Next.js official TS example with styled-components needs an update.

& it seems we need to add this even if we turn on styledComponents in compiler otherwise I am getting FOUC as mentioned by @ppuzio.

[tettoffensive]

I'm not really sure why the array is necessary as the type definition states:

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

However, just trying to do a straight fragment without an array doesn't seem to work.

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