I am facing such issue in my new nextjs app. The problem started to show itself when I used props to add a carousel to my project. It gives a problem that the originalRenderPage in Document.js is not defined. Thanks for your help
Server Error
TypeError: Cannot read properties of undefined (reading 'ref')
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
pages\_document.js (26:25) @ Object.ctx.renderPage
24 | const originalRenderPage = ctx.renderPage
25 |
> 26 | ctx.renderPage = () => originalRenderPage({
| ^
27 | enhanceApp: WrappedComponent => props => sheets.collect(<WrappedComponent {...props} />)
28 | })import React, { Fragment } from 'react'
import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheets } from '@material-ui/styles'
import {Html} from "next/document";
class _Document extends Document {
render () {
return (
<Html lang='pt-BR' dir='ltr'>
<Head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
_Document.getInitialProps = async ctx => {
const sheets = new ServerStyleSheets()
const originalRenderPage = ctx.renderPage
ctx.renderPage = () => originalRenderPage({
enhanceApp: WrappedComponent => props => sheets.collect(<WrappedComponent {...props} />)
})
const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()]
}
}
export default _Document
This is your error
TypeError: Cannot read properties of undefined (reading 'ref')
It's happening because of this line
const sheets = new ServerStyleSheets()
Fix it to
const sheets = new ServerStyleSheet()