SSR Next.js, Material UI: Cannot read property 'button' of undefined

[d3tr1tus]

js and i want to use Material UI in SSR. I made setup like here but i am getting error Cannot read property 'button' of undefined

theme.ts

import { createMuiTheme, ThemeOptions } from '@material-ui/core/styles';

const theme = (options: ThemeOptions) => {
	return createMuiTheme({
		palette: {
			primary: {
				main: '#b5ddd1'
			},
			secondary: {
				main: '#b2d9ea'
			},
		},
		...options,
	})
}

Next.js says that i have problem in _document.tsx

import { ServerStyleSheets, ThemeProvider } from '@material-ui/core/styles'
import theme from '../src/common/theme'

...

ctx.renderPage = () =>
				originalRenderPage({
                    enhanceApp: (App: any) => (props: any) => sheet.collectStyles(sheets.collect(<ThemeProvider theme={theme}><App {...props} /></ThemeProvider>)),
				})

I am not sure what am I doing wrong?

Thanks for help! 🙏🏼

[LukasBombach]

How does this error occur? I can't see any reference to a button in the code that you posted

[d3tr1tus]

Right sorry @LukasBombach . In my pages index.tsx I added

import { FC } from 'react'
import { Button } from '@material-ui/core'

const Home: FC = () => {

    return (
            <div>
                <div>Log into APP</div>
                <Button>Test</Button>
            </div>
    )
}

export default Home

[LukasBombach]

Can you try to import the button like this?

- import { Button } from '@material-ui/core'
+ import Button from '@material-ui/core/Button';

[d3tr1tus]

No that also not working unfortunately 😞

[d3tr1tus]

I seems that function createMuiTheme don't loading default template. I that possible @LukasBombach

[d3tr1tus]

I resolve it with adding

_document.tsx

CustomDocument.getInitialProps = async (ctx) => {
    const sheets = new ServerStyleSheets();
    const originalRenderPage = ctx.renderPage;

    ctx.renderPage = () =>
            originalRenderPage({
                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()],
    };
};

and theme.ts

const theme = createMuiTheme({
	palette: {
		primary: {
			main: '#b5ddd1'
		},
		secondary: {
			main: '#b2d9ea'
		},
		error: {
			main: red.A400,
		},
		background: {
			default: '#fff',
		},
	},
});

I used deprecated code 😏

[timneutkens]

Nothing deprecated there 🤔