Encountered this error after upgrading an existing functioning application to NextJs:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at ReactDOMServerRenderer.render (<path to project directory>\node_modules\react-dom\cjs\react-dom-server.node.development.js:3743:17)
at ReactDOMServerRenderer.read (<path to project directory>\node_modules\react-dom\cjs\react-dom-server.node.development.js:3373:29)
at renderToString (<path to project directory>\node_modules\react-dom\cjs\react-dom-server.node.development.js:3988:27)
at render (<path to project directory>\node_modules\next\dist\next-server\server\render.js:82:16)
at Object.renderPage (<path to project directory>\node_modules\next\dist\next-server\server\render.js:382:16)
at Function.getInitialProps (<path to project directory>\.next\server\static\development\pages\_document.js:483:19)
The existing application has a custom _document.js file. However, even after removing it, the above error persists. Unfortunately, I'm unable to share the entire application code here. Here's a snippet from the
.next\server\static\development\pages\_document.jsstatic async getInitialProps(ctx) {
const enhancers = false ? undefined : [];
const enhanceApp = App => {
for (const enhancer of enhancers) {
App = enhancer(App);
}
return props => _react.default.createElement(App, props);
};
const {
html,
head
} = await ctx.renderPage({
enhanceApp
});
const styles = [...(0, _server.default)(), ...(false ? undefined : [])];
return {
html,
head,
styles
};
What I've tried so far:
- Researched the error online
- Attempted to modify import statements and commented out certain parts of the custom _document.js file
- Tried replacing the custom _document.js with an example from the NextJs documentation
- Removed the custom _document.js file altogether
- Deleted the node_modules directory and reinstalled dependencies using
npm install - Deleted the .next directory and restarted the application
Has anyone encountered a similar issue? Any insights or hints would be greatly appreciated. Thank you for your assistance.