next.js - Server Error Error: Element type is invalid: expected a string

Question

I'm having problems with this error using NextJS.

Server Error
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.

This error happened while generating the page. Any console logs will be displayed 
in the terminal window.

Source:

pages\_document.tsx (86:33) @ Function.getInitialProps

  84 |     }
  85 | 
> 86 |     const { html, head } = await ctx.renderPage({ enhanceApp })
     |                                 ^
  87 |     const styles = [...flush()]
  88 |     return { html, head, styles }
  89 |   }

My code:

function MyApp({ Component, pageProps, openSidebar, closeSidebar }) {
    const [sidebarOpen, setSidebarOpen] = useState(false)
    
    useEffect(() => {
        const openSidebar = () => {
            setSidebarOpen(true);
        };
        const closeSidebar = () => {
            setSidebarOpen(false);
        };
    })
    
    return (
        <>
            <NavBar sidebarOpen={sidebarOpen} openSidebar={openSidebar} />
            <Container>              
            <Component {...pageProps} />
            <Main />
            <SideBar sidebarOpen={sidebarOpen} closeSidebar={closeSidebar} /> 
            </Container>
        </>
    )
}
    
export default MyApp

question from:https://stackoverflow.com/questions/65847490/server-error-error-element-type-is-invalid-expected-a-string

Answer 1

Waitting for answers