TypeScript Docs for _document.tsx #429

bnhr · 2021-05-07T13:58:01Z

bnhr
May 7, 2021

Is there any specific config for _document.tsx?
I faced this issue:
Property 'ids' does not exist on type 'Readonly<RenderPageResult & { styles?: ReactFragment | ReactElement<any, string | JSXElementConstructor<any>>[]; } & { ...; }> & Readonly<...>'.
and
Property 'css' does not exist on type 'Readonly<RenderPageResult & { styles?: ReactFragment | ReactElement<any, string | JSXElementConstructor<any>>[]; } & { ...; }> & Readonly<...>'.ts(2339)

ben-rogerson · 2021-05-07T14:29:20Z

ben-rogerson
May 7, 2021
Maintainer

Have you checked out these next.js docs yet?

2 replies

bnhr May 7, 2021
Author

Yes, but for not for this data-emotion
<style data-emotion-css={this.props.ids.join(' ')} dangerouslySetInnerHTML={{ __html: this.props.css }}/>

ben-rogerson May 7, 2021
Maintainer

Could you please show us how to recreate this issue?

rottitime · 2022-11-24T12:52:57Z

rottitime
Nov 24, 2022

I have created a fix. @ben-rogerson can you please approve ben-rogerson/twin.examples#105. The fix provides better types for ctx

//_document.tsx
import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps
} from 'next/document'
import { extractCritical } from '@emotion/server'

type NewDocumentInitialProps = DocumentInitialProps & {
  ids: string[]
  css: string
}

class CustomDocument extends Document<NewDocumentInitialProps> {
  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx)
    const critical = extractCritical(initialProps.html)
    initialProps.html = critical.html
    initialProps.styles = (
      <>
        {initialProps.styles}
        <style
          data-emotion-css={critical.ids.join(' ')}
          dangerouslySetInnerHTML={{ __html: critical.css }}
        />
      </>
    )

    return initialProps
  }

  render() {
    return (
      <Html lang="en">
        <Head>
          <style
            data-emotion-css={this.props?.ids?.join(' ')}
            dangerouslySetInnerHTML={{ __html: this.props.css }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default CustomDocument

@ben-rogerson Would it be ok to add this for Typescript support please?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeScript Docs for _document.tsx #429

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

TypeScript Docs for _document.tsx #429

bnhr May 7, 2021

Replies: 2 comments · 2 replies

ben-rogerson May 7, 2021 Maintainer

bnhr May 7, 2021 Author

ben-rogerson May 7, 2021 Maintainer

rottitime Nov 24, 2022

bnhr
May 7, 2021

Replies: 2 comments 2 replies

ben-rogerson
May 7, 2021
Maintainer

bnhr May 7, 2021
Author

ben-rogerson May 7, 2021
Maintainer

rottitime
Nov 24, 2022