Component definition is missing display name

[ognitio-technologies]

Describe the feature you'd like to request

Project: Next js material ui
Action: npm run build
Error: Component definition is missing display name
Issues Page: _document.js
github link: https://github.com/ognitio-sample-projects/nextjs-material-ui-5

My Code

package.json
{
"name": "sample-next-js-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@emotion/cache": "^11.4.0",
"@emotion/react": "^11.4.1",
"@emotion/server": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@mui/icons-material": "^5.0.0",
"@mui/material": "^5.0.0",
"@mui/styles": "^5.0.0",
"@reduxjs/toolkit": "^1.6.1",
"clsx": "^1.1.1",
"next": "11.1.2",
"prop-types": "^15.7.2",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-redux": "^7.2.5"
},
"devDependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.2"
}
}

eslintrc.json
{
"extends": "next/core-web-vitals",
"rules": { "@next/next/no-document-import-in-page": "off" }
}

document.js
import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

export default class MyDocument extends Document {
render() {
return (


{/* PWA primary color */}

);
}
}

// getInitialProps belongs to _document (instead of _app),
// it's compatible with static-site 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

const originalRenderPage = ctx.renderPage;

// You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);

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

const initialProps = await Document.getInitialProps(ctx);
// This is important. It prevents emotion to render invalid HTML.
// See mui/material-ui#26561 (comment)
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={${style.key} ${style.ids.join(' ')}}
key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));

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

Describe the solution you'd like

NA

Describe alternatives you've considered

NA

[awareness481]

Naming the function seems to solve the issue #28786 (comment)

[ognitio-technologies]

Naming the function seems to solve the issue #28786 (comment)

Still the same error
check the latest commit : github link: https://github.com/ognitio-sample-projects/nextjs-material-ui-5

[stefanprobst]

Still the same error

are you sure? looks like you are referencing sheets - where is that coming from?

to give the function in your original code snippet a name you can just do:

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