Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component definition is missing display name #29374

Closed
ognitio-technologies opened this issue Sep 25, 2021 · 3 comments
Closed

Component definition is missing display name #29374

ognitio-technologies opened this issue Sep 25, 2021 · 3 comments

Comments

@ognitio-technologies
Copy link

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
Copy link
Contributor

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

@ognitio-technologies
Copy link
Author

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
Copy link
Contributor

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} />;
        },
    });

@vercel vercel locked and limited conversation to collaborators Sep 27, 2021

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants