next/document should not be imported outside of pages/_document.js

[ognitio-technologies]

Project : Next.js
Query: npm run build

Error: next/document should not be imported outside of pages/_document.js
Error: Component definition is missing display name react/display-name

Packgae.json
{
"name": "armcaegis-website",
"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"
}
}

_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) => {

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 #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,
],
};
};

[Forchapeatl]

This issue has been fixed here vercel/next.js#28596
You need to update Nextjs and eslint-config-next to 11.1.3-canary.7 and don't forget to clear cache next lint --no-cache

If you don't want to update to the canary versions and still keep working normally just exclude it from your .eslintrc.json rules:"rules": { "@next/next/no-document-import-in-page": "off" }

[mnajdova]

Thanks for linking the issue @Forchapeatl

Doesn't look like it is related to MUI, I am closing it.

[ognitio-technologies]

Still the same problem after disable "rules": { "@next/next/no-document-import-in-page": "off" }

My Code:

.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) => {
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 #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,
],
};
};

debug log
info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build'
1 verbose cli ]
2 info using npm@6.14.13
3 info using node@v14.17.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle eventshut-ui-mainnet@0.1.0prebuild: eventshut-ui-mainnet@0.1.0
6 info lifecycle eventshut-ui-mainnet@0.1.0build: eventshut-ui-mainnet@0.1.0
7 verbose lifecycle eventshut-ui-mainnet@0.1.0build: unsafe-perm in lifecycle true
8 verbose lifecycle eventshut-ui-mainnet@0.1.0build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\Web\Projects\ognitio\eventsHut\eventshut-ui-mainnet\node_modules.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\Program Files\PuTTY;C:\Program Files (x86)\QuickTime\QTSystem;C:\Users\admin\AppData\Local\Microsoft\WindowsApps;;C:\Users\admin\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\admin\AppData\Roaming\npm
9 verbose lifecycle eventshut-ui-mainnet@0.1.0build: CWD: D:\Web\Projects\ognitio\eventsHut\eventshut-ui-mainnet
10 silly lifecycle eventshut-ui-mainnet@0.1.0build: Args: [ '/d /s /c', 'next build' ]
11 silly lifecycle eventshut-ui-mainnet@0.1.0build: Returned: code: 1 signal: null
12 info lifecycle eventshut-ui-mainnet@0.1.0build: Failed to exec build script
13 verbose stack Error: eventshut-ui-mainnet@0.1.0 build: next build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:375:28)
13 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:375:28)
13 verbose stack at maybeClose (internal/child_process.js:1055:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
14 verbose pkgid eventshut-ui-mainnet@0.1.0
15 verbose cwd D:\Web\Projects\ognitio\eventsHut\eventshut-ui-mainnet
16 verbose Windows_NT 10.0.19043
17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "build"
18 verbose node v14.17.1
19 verbose npm v6.14.13
20 error code ELIFECYCLE
21 error errno 1
22 error eventshut-ui-mainnet@0.1.0 build: next build
22 error Exit status 1
23 error Failed at the eventshut-ui-mainnet@0.1.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

[ognitio-technologies]

[ghost]

For me as well there is also the error of:
component definition is missing display name
Which happens on lline 60 :
enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,

@ognitio-technologies
My way of fixing the following error;
Error: next/document should not be imported outside of pages/_document.js
Was by downgrading next to 11.1.0 as well as eslint-config-next to 11.1.0

From what it looks like both errors are eslint relatable as it provides us with common 'rules' of how we should code our apps.

[ognitio-technologies]

This is the app.js page. the code taken from material-ui sample next js project

reference link : https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js

import * as React from 'react';
import PropTypes from 'prop-types';
import Head from 'next/head';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { CacheProvider } from '@emotion/react';
import theme from '../src/theme';
import createEmotionCache from '../src/createEmotionCache';

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache();

export default function MyApp(props) {
const { Component, emotionCache = clientSideEmotionCache, pageProps } = props;

return (


<title>My page</title>



{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}

<Component {...pageProps} />


);
}

MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
emotionCache: PropTypes.object,
pageProps: PropTypes.object.isRequired,
};

[ognitio-technologies]

This issue has been fixed here vercel/next.js#28596
You need to update Nextjs and eslint-config-next to 11.1.3-canary.7 and don't forget to clear cache next lint --no-cache

If you don't want to update to the canary versions and still keep working normally just exclude it from your .eslintrc.json rules:"rules": { "@next/next/no-document-import-in-page": "off" }

This issue has been fixed here vercel/next.js#28596
You need to update Nextjs and eslint-config-next to 11.1.3-canary.7 and don't forget to clear cache next lint --no-cache

If you don't want to update to the canary versions and still keep working normally just exclude it from your .eslintrc.json rules:"rules": { "@next/next/no-document-import-in-page": "off" }

Still the same issues:
git hub link: https://github.com/ognitio-sample-projects/nextjs-material-ui-5

[ognitio-technologies]

For me as well there is also the error of:
component definition is missing display name
Which happens on lline 60 :
enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,

@ognitio-technologies
My way of fixing the following error;
Error: next/document should not be imported outside of pages/_document.js
Was by downgrading next to 11.1.0 as well as eslint-config-next to 11.1.0

From what it looks like both errors are eslint relatable as it provides us with common 'rules' of how we should code our apps.

Still same issues git hub link: https://github.com/ognitio-sample-projects/nextjs-material-ui-5

[DevDaveJ]

For me as well there is also the error of: component definition is missing display name Which happens on lline 60 : enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,

@ognitio-technologies My way of fixing the following error; Error: next/document should not be imported outside of pages/_document.js Was by downgrading next to 11.1.0 as well as eslint-config-next to 11.1.0

From what it looks like both errors are eslint relatable as it provides us with common 'rules' of how we should code our apps.

For the record, I got the 'component definition is missing display name...' error after following the steps to fix the 'next/document should not be imported outside of pages/document...' error.

I did the following to workaround. Change the line
enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />

To:

	enhanceApp: (App) => function appEnhanced(props) {
		return(<App emotionCache={cache} {...props} />) 
	},