mdbootstrap / material-design-for-bootstrap

Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
https://mdbootstrap.com/docs/standard/
MIT License
9.34k stars 1.15k forks source link

React MDBoostrap break SSR : window is not defined #196

Closed ylacaute closed 5 years ago

ylacaute commented 5 years ago

Expected behavior

We should be able to build and run a server side rendered application.

Actual behavior

When running SSR application, we got this error :

ReferenceError: window is not defined
    at Object.../node_modules/mdbreact/dist/mdbreact.js

Your working environment and MDB version information

Webpack: 4.24.0 react: 16.6.0 mdbreact: 4.8.2 Typescript: 3.1.6 Debian 4.9.110-3+deb9u6 (2018-10-08) x86_64 GNU/Linux

Resources (screenshots, code snippets etc.)

!function(e,t){ true?module.exports=t(__webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"),__webpack_require__(/*! react */ "../node_modules/react/index.js"),__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"),__webpack_require__(/*! react-popper */ "../node_modules/react-popper/lib/react-popper.js"),__webpack_require__(/*! react-dom */ "../node_modules/react-dom/index.js"),__webpack_require__(/*! react-transition-group */ "../node_modules/react-transition-group/index.js"),__webpack_require__(/*! react-toastify */ "../node_modules/react-toastify/lib/index.js"),__webpack_require__(/*! react-router-dom */ "../node_modules/react-router-dom/es/index.js"),__webpack_require__(/*! react-numeric-input */ "../node_modules/react-numeric-input/index.js"),__webpack_require__(/*! outy */ "../node_modules/outy/index.js")):undefined}(window,function(e,t,n,r,o,a,i,c,l,u){return function(e){var t={};functio

ReferenceError: window is not defined
    at Object.../node_modules/mdbreact/dist/mdbreact.js (/home/epi/Prog/boilerplates/react-ssr/dist/server/app.bundle.js:26136:881)
    at __webpack_require__ (/home/epi/Prog/boilerplates/react-ssr/dist/server/app.bundle.js:20:30)
    at Module../components/sample/SampleButtons.tsx (/home/epi/Prog/boilerplates/react-ssr/dist/server/app.bundle.js:78991:66)

I was able to get the application running with webpack-dev-server OR with SSR. After I added mdboostrap, I was only able to get the application running with webpack-dev-server, the SSR is broken because that window.

I also have a probem when adding the optimization chunk in webpack ONLY on SSR after adding mdbreact :

/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
                                  ^
TypeError: Cannot read property 'call' of undefined

If I remove optimization chunk at least I am able to build SSR. But I think this is a not a probem from mdbreact.

Any help is welcome

ylacaute commented 5 years ago

I think this is due the "outy" dependency (https://github.com/souporserious/outy/blob/master/index.js)

UPDATE : no, after some tests it's not Outy, maybe another library.

ylacaute commented 5 years ago

Please see https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/issues/52