Next js 服务器错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数，但得到：未定义
[英]Next js Server Error: Element type is invalid: expected a string (for built-in components) or a class/function but got: undefined
问题描述
I am trying to understand why I get the following server error.
我试图了解为什么我收到以下服务器错误。
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
My _document.js looks like this:我的_document.js看起来像这样：
// eslint-disable-next-line @next/next/no-document-import-in-page
import React from "react";
// eslint-disable-next-line @next/next/no-document-import-in-page
import Document, { Html, Head, Main, NextScript } from "next/document";
import { ServerStyleSheets } from "@material-ui/core/styles";
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// 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({
// eslint-disable-next-line react/display-name
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: [
...React.Children.toArray(initialProps.styles),
sheets.getStyleElement(),
],
};
};
the error particularly points to this line:错误特别指向这一行：
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
UDPATE: my _app.js file looks like this: UDPATE：我的_app.js文件如下所示：
import React from "react";
import PropTypes from "prop-types";
import { ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import theme from "../src/theme";
export default function MyApp({ Component, pageProps }) {
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector("#jss-server-side");
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
console.log("_app.js", theme);
return (
<React.Fragment>
<ThemeProvider theme={theme}>
{/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</React.Fragment>
);
}
MyApp.propTypes = {
Component: PropTypes.elementType.isRequired,
pageProps: PropTypes.object.isRequired,
};
any ideas of what could be going on?关于可能发生什么的任何想法？
3 个解决方案
解决方案1
0 2021-12-11 20:31:52
Replace this line替换这一行
import { ThemeProvider } from "@material-ui/core/styles";从“@material-ui/core/styles”导入{ThemeProvider}；
with和
import ThemeProvider from "@material-ui/styles/ThemeProvider";从“@material-ui/styles/ThemeProvider”导入 ThemeProvider；
解决方案2
-1 2021-09-01 08:33:02
<应用程序根本没有导入或定义在文件中，再次检查
解决方案3
-1 2021-09-01 15:09:57
There is certain mistakes I noticed:我注意到一些错误：
- At _document.js在 _document.js
ctx.renderPage = () =>
originalRenderPage({
// eslint-disable-next-line react/display-name
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
Here, the component is Not Imported, as you can see above.此处，组件未导入，如上所示。 so, you need to import the App component from where you stored it to use the Component.因此，您需要从存储它的位置导入 App 组件才能使用该组件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.