Next.js: Property 'props' does not exist on type 'default'.

Created on 19 Sep 2018  路  4Comments  路  Source: vercel/next.js

Using something like this in _document.tsx:

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class extends Document {

  static async getInitialProps(ctx) {

    const sheet = new ServerStyleSheet();
    const page = ctx.renderPage(App => props => sheet.collectStyles(<App {...props} />));
    const styleTags = sheet.getStyleElement();
    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      ...page,
      styleTags
    };

  }

  render () {

    return (
      <html>
        <Head>
          {this.props.styleTags} // Property 'props' does not exist on type 'default'.
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );

  }

}

Since this is TypeScript, eslint gives a warning:
Property 'props' does not exist on type 'default'.

Searched the issues, and not sure of the proper way to fix this. Any suggestions?

picture jd327

Most helpful comment

@leotm @davideasaf @nvuhung The way to fix this is to create an interface for your props and then pass that to the Document class you are extending from. Like so:

interface Props {
  styleTags: any
}

export default class MyDocument extends Document<Props> {
 ...
}
picture meenie on 28 Dec 2018
👍8

All 4 comments

Did you find out what it was in the end?

I'm getting

[ts] Property 'styleTags' does not exist on type 'Readonly<{ children?: ReactNode; }> & Readonly<DefaultDocumentIProps & DocumentProps<Record<string, string | string[]>>>'.

With

    "next": "^7.0.1",
    "@types/next": "^7.0.1",
leotm picture leotm on 8 Oct 2018

+1 @leotm

davideasaf picture davideasaf on 22 Oct 2018

Same issue with:

"next": "^7.0.2",
"@types/next": "^7.0.5",
nvuhung picture nvuhung on 28 Nov 2018
👍1

@leotm @davideasaf @nvuhung The way to fix this is to create an interface for your props and then pass that to the Document class you are extending from. Like so:

interface Props {
  styleTags: any
}

export default class MyDocument extends Document<Props> {
 ...
}
meenie picture meenie on 28 Dec 2018
👍8
Was this page helpful?
0 / 5 - 0 ratings

Related issues

knipferrc picture knipferrc  路  3Comments
wagerfield picture wagerfield  路  3Comments
YarivGilad picture YarivGilad  路  3Comments
timneutkens picture timneutkens  路  3Comments
DvirSh picture DvirSh  路  3Comments