Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

window is not defined with NextJS

See original GitHub issue

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: