window is not defined with NextJS

[JuanRuiz-erebror]

I'm trying to use mdbreact in a existig project with NextJs. This is the code:

import React from 'react';
import { Col, Container, Row, Footer } from 'mdbreact';

class FooterPage extends React.Component {
    render(){
        return(
            <Footer color="stylish-color-dark" className="font-small pt-4 mt-4">
                <Container className="text-center text-md-left">
                    <Row className="text-center text-md-left mt-3 pb-3">
                        <Col md="3" lg="3" xl="3" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Company name</h6>
                            <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </Col>
                        <hr className="w-100 clearfix d-md-none"/>
                        <Col md="2" lg="2" xl="2" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Products</h6>
                            <p><a href="#!">MDBootstrap</a></p>
                            <p><a href="#!">MDWordPress</a></p>
                            <p><a href="#!">BrandFlow</a></p>
                            <p><a href="#!">Bootstrap Angular</a></p>
                        </Col>
                        <hr className="w-100 clearfix d-md-none"/>
                        <Col md="3" lg="2" xl="2" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Useful links</h6>
                            <p><a href="#!">Your Account</a></p>
                            <p><a href="#!">Become an Affiliate</a></p>
                            <p><a href="#!">Shipping Rates</a></p>
                            <p><a href="#!">Help</a></p>
                        </Col>
                        <hr className="w-100 clearfix d-md-none"/>
                        <Col md="4" lg="3" xl="3" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Contact</h6>
                            <p><i className="fa fa-home mr-3"></i> New York, NY 10012, US</p>
                            <p><i className="fa fa-envelope mr-3"></i> info@gmail.com</p>
                            <p><i className="fa fa-phone mr-3"></i> + 01 234 567 88</p>
                            <p><i className="fa fa-print mr-3"></i> + 01 234 567 89</p>
                        </Col>
                    </Row>
                    <hr/>
                    <Row className="d-flex align-items-center">
                        <Col md="8" lg="8">
                            <p className="text-center text-md-left grey-text">&copy; {(new Date().getFullYear())} Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a></p>
                        </Col>
                        <Col md="4" lg="4" className="ml-lg-0">
                            <div className="text-center text-md-right">
                                <ul className="list-unstyled list-inline">
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-facebook"></i></a></li>
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-twitter"></i></a></li>
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-google-plus"></i></a></li>
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </Col>
                    </Row>
                </Container>
            </Footer>
        );
    }
}
        
export default FooterPage;

And this is the error that is showing:

window is not defined
ReferenceError: window is not defined
    at /home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/node_modules/style-loader/lib/addStyles.js:23:1
    at /home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/node_modules/style-loader/lib/addStyles.js:12:1
    at module.exports (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/node_modules/style-loader/lib/addStyles.js:57:1)
    at Object.<anonymous> (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/components/Waves.css?f181:12:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/components/Waves.js:5:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/components/Button.js:4:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/index.js:4:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/mdbreact.js:4868:18)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at module.exports (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:62:1)
    at /home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/mdbreact.js:76:10
    at webpackUniversalModuleDefinition (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/universalModuleDefinition

I've installed from 2 wayes:

• npm i --save mdbreact
• in package.json : "mdbreact": "git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git#react-upgrade"

I will have made a mistake? Nobody uses yet mdbreact with NextJs?
I think something happends in server side rendering. I'm not sure.

Thanks

[Archakov06]

https://github.com/zeit/next.js/wiki/FAQ#i-use-a-library-which-throws-window-is-undefined

[JStrebeyko]

Hi there, MDB React is only about to turn SSR-compatible. Until then please make sure to include the necessitated code in componentDidMount lifecycle method or go for some handy tricks.

[JuanRuiz-erebror]

@JStrebeyko
Yes, I checked that mdbreact only works in client side, so it is not very compatible with NextJs unless I want to dynamically load it (only client side).

Actually, I use reactstrap combined with mdb styles, but this is not a full solution.
I hope it turns ssr compatible soon!

Thanks.

[JStrebeyko]

Make sure you don't miss out!

[remacr]

It outputs the same error using Electrode.io from Walmart Labs

[Rotarepmi]

I assume that this issue can be closed. We will inform you if we will make some changes in ssr direction.

Best, Jakub