Component definition is missing display name #29419
ognitio-technologies
started this conversation in
Ideas
Replies: 3 comments
-
Naming the function seems to solve the issue #28786 (comment) |
Beta Was this translation helpful? Give feedback.
0 replies
-
Still the same error |
Beta Was this translation helpful? Give feedback.
0 replies
-
are you sure? looks like you are referencing 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} />;
},
}); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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
Beta Was this translation helpful? Give feedback.
All reactions