Custom _document file example for styled-components throws a TS bug after updating @types/react to ^18.0.0 #36008
Description
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.