Next is not recognizing _document.tsx file #28786

Anam0927 · 2021-09-04T12:02:35Z

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

14.17.1

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next start

Describe the Bug

Here's my _document.tsx file

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { ServerStyleSheets, StylesProvider } from '@material-ui/core/styles';
import React from 'react';

export default class MyDocument extends Document {
  render(): JSX.Element {
    return (
      <Html lang="en">
        <Head>
          <link rel="preconnect" href="https://fonts.gstatic.com" />
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@500&display=swap"
            rel="stylesheet"
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `(function (w, d, s, l, i) {
              w[l] = w[l] || [];
              w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
              const f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
              j.async = true;
              j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
              f.parentNode.insertBefore(j, f);
            })(window, document, 'script', 'dataLayer', 'xxxxx')`,
            }}
          ></script>
        </Head>
        <body>
          <noscript
            dangerouslySetInnerHTML={{
              __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=xxxxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
            }}
          ></noscript>
          <StylesProvider injectFirst>
            <Main />
            <NextScript />
          </StylesProvider>
        </body>
      </Html>
    );
  }
}

// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
  // Resolution order
  //
  // On the server:
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. document.getInitialProps
  // 4. app.render
  // 5. page.render
  // 6. document.render
  //
  // On the server with error:
  // 1. document.getInitialProps
  // 2. app.render
  // 3. page.render
  // 4. document.render
  //
  // On the client
  // 1. app.getInitialProps
  // 2. page.getInitialProps
  // 3. app.render
  // 4. page.render

  // Render app and page and get the context of the page with collected side effects.
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    // Styles fragment is rendered after the app and page rendering finish.
    styles: [sheets.getStyleElement(), ...React.Children.toArray(initialProps.styles)],
  };
};

Everything was working fine till I upgraded Next from 11.1.0 to 11.1.2
Now, build error comes stating the following:

./pages/_document.tsx
1:1  Error: next/document should not be imported outside of pages/_document.js. See https://nextjs.org/docs/messages/no-document-import-in-page.  @next/next/no-document-import-in-page
15:11  Warning: Use the `next/script` component for loading third party scripts. See: https://nextjs.org/docs/messages/next-script-for-ga.  @next/next/next-script-for-ga
78:28  Error: Component definition is missing display name  react/display-name

What's the problem here? It is in the pages folder and everything was working fine. Now, even if I go back to 11.1.0, the error still comes!!

Expected Behavior

There should be no error as the file is correctly placed with content also correctly written

To Reproduce

Create a custom _document.tsx file in a typescript next project and try to build the project.

The text was updated successfully, but these errors were encountered:

rshtj · 2021-09-04T12:15:47Z

Can confirm, even I am having the same issue

N0tExisting · 2021-09-04T14:29:49Z

This also happens with global styles & _app.tsx

RaenonX · 2021-09-05T22:06:50Z

Confirming the same issue

Poujhit · 2021-09-06T07:39:51Z

This is a issue with eslint config that nextjs 11.1.2 uses. eslint-config-next 11.1.2 causes this issue. Try downgrading that or use the canary version of the plugin.

Anam0927 · 2021-09-06T09:12:59Z

This is a issue with eslint config that nextjs 11.1.2 uses. eslint-config-next 11.1.2 causes this issue. Try downgrading that or use the canary version of the plugin.

The latest canary version of the plugin (11.1.3-canary.7) does not solve the issue, but downgrading to 11.1.0 does solve the issue. Thanks!

The react/display-name error still exists though. Any idea how I can remove that? This is the code where the error occurs:

ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

The squiggly red line in VSCode comes for this part (props) => sheets.collect(<App {...props} />)

stefanprobst · 2021-09-06T11:34:32Z

The react/display-name error still exists though

you can choose to ignore eslint errors by adding an inline comment (see here), or you can globally disable the rule in your .eslintrc.json file (see here).

balazsorban44 · 2021-09-06T12:51:21Z

Or you can convert it accordingly to a named function:

ctx.renderPage = () =>
  originalRenderPage({
    enhanceApp: (App) =>
      function EnhancedApp(props) {
        return sheets.collect(<App {...props} />)
      },
  })

This is not a Next.js-specific problem per se, I see you are using Material UI. https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js#L58

They should be probably made aware of this. Either adding a an ESLint ignore on their example above that line or at least comment on it.

Anam0927 · 2021-09-07T05:48:34Z

Or you can convert it accordingly to a named function:
ctx.renderPage = () =>
  originalRenderPage({
    enhanceApp: (App) =>
      function EnhancedApp(props) {
        return sheets.collect(<App {...props} />)
      },
  })
This is not a Next.js-specific problem per se, I see you are using Material UI. https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js#L58

They should be probably made aware of this. Either adding a an ESLint ignore on their example above that line or at least comment on it.

Thanks a lot for this!

omBratteng · 2021-09-13T08:22:02Z

This PR should fix it, but it has not been released yet
jsx-eslint/eslint-plugin-react#3065

tr1s · 2021-09-19T15:10:36Z

Or you can convert it accordingly to a named function:
ctx.renderPage = () =>
  originalRenderPage({
    enhanceApp: (App) =>
      function EnhancedApp(props) {
        return sheets.collect(<App {...props} />)
      },
  })
This is not a Next.js-specific problem per se, I see you are using Material UI. https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js#L58

They should be probably made aware of this. Either adding a an ESLint ignore on their example above that line or at least comment on it.

This fix did not work for me, I just get page building errors instead:

Also @omBratteng that PR is merged and all my packages are up to date but my issue still persists.

Edit* I missed the note about downgrading eslint-config-next from 11.2.1 to 11.1.0, this fixed my build error. The react/display-name error still exists on the file though like mentioned above.

I am curious to know when I can upgrade without having problems again though.

Cheers!

omBratteng · 2021-09-20T12:03:09Z

@tr1s if you install eslint-config-next to 11.2.1 and then install eslint-plugin-react separately, does that work?

tr1s · 2021-09-22T17:32:46Z

@tr1s if you install eslint-config-next to 11.2.1 and then install eslint-plugin-react separately, does that work?

I actually just tested out updating eslint-config-next to 11.2.1 again without installing eslint-plugin-react and it's working fine with no deployment issues or errors now.

balazsorban44 · 2022-01-27T17:07:51Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Anam0927 added the bug Issue was opened via the bug report template. label Sep 4, 2021

Anam0927 closed this as completed Sep 7, 2021

stefanprobst mentioned this issue Sep 19, 2021

"Component definition is missing display name" Next.js build fail using code from docs #29204

Closed

This was referenced Sep 19, 2021

create display name tr1s/nightizm#2

Merged

"Component definition is missing display name" Next.js build fail using code from docs styled-components/styled-components#3584

Closed

awareness481 mentioned this issue Sep 25, 2021

Component definition is missing display name #29374

Closed

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next is not recognizing _document.tsx file #28786

Next is not recognizing _document.tsx file #28786

Anam0927 commented Sep 4, 2021

rshtj commented Sep 4, 2021

N0tExisting commented Sep 4, 2021

RaenonX commented Sep 5, 2021

Poujhit commented Sep 6, 2021 •

edited

Anam0927 commented Sep 6, 2021

stefanprobst commented Sep 6, 2021

balazsorban44 commented Sep 6, 2021

Anam0927 commented Sep 7, 2021

omBratteng commented Sep 13, 2021

tr1s commented Sep 19, 2021 •

edited

omBratteng commented Sep 20, 2021

tr1s commented Sep 22, 2021 •

edited

balazsorban44 commented Jan 27, 2022

Next is not recognizing _document.tsx file #28786

Next is not recognizing _document.tsx file #28786

Comments

Anam0927 commented Sep 4, 2021

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

rshtj commented Sep 4, 2021

N0tExisting commented Sep 4, 2021

RaenonX commented Sep 5, 2021

Poujhit commented Sep 6, 2021 • edited

Anam0927 commented Sep 6, 2021

stefanprobst commented Sep 6, 2021

balazsorban44 commented Sep 6, 2021

Anam0927 commented Sep 7, 2021

omBratteng commented Sep 13, 2021

tr1s commented Sep 19, 2021 • edited

omBratteng commented Sep 20, 2021

tr1s commented Sep 22, 2021 • edited

balazsorban44 commented Jan 27, 2022

Poujhit commented Sep 6, 2021 •

edited

tr1s commented Sep 19, 2021 •

edited

tr1s commented Sep 22, 2021 •

edited