Topic: React Server Side Rendering Errors
datashield asked 6 years ago
Hi,
I am using MDB React Pro v4.8.7. My team uses SSR for all of our websites but I have been getting errors trying to use MDB. I have looked around before posting and found a GitHub issue (here / here) indicating that MDB was not SSR compatible as of October 28, 2018.
The exact error I'm receiving is:
ReferenceError: window is not defined
at Object.<anonymous> (\development\learning\mdb-experiment\node_modules\mdbreact\dist\mdbreact.js:1:1660)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object.mdbreact (\development\learning\mdb-experiment\dist\server\static\development\pages\index.js:522:18)
at __webpack_require__ (\development\learning\mdb-experiment\dist\server\static\development\pages\index.js:23:31)
at Module../components/sidenav/index.jsx (\development\learning\mdb-experiment\dist\server\static\development\pages\index.js:107:66)
at __webpack_require__ (\development\learning\mdb-experiment\dist\server\static\development\pages\index.js:23:31)
at Module../pages/index.jsx (\development\learning\mdb-experiment\dist\server\static\development\pages\index.js:435:77)
at __webpack_require__ (\development\learning\mdb-experiment\dist\server\static\development\pages\index.js:23:31)
at Object.3 (\development\learning\mdb-experiment\dist\server\static\development\pages\index.js:510:18)
at __webpack_require__ (\development\learning\mdb-experiment\dist\server\static\development\pages\index.js:23:31)
I was wondering if there is an update (or beta releases) that resolves the issues with window references described in the GitHub issue. If there is not, are there any known workarounds or other information on the matter?
Thanks
Jakub Mandra staff premium answered 6 years ago
Hi,
There are components in the package which are dependent of window object. So you would have to define window on the server side.
There are no updates yet which would clearly resolve that issue.
datashield answered 6 years ago
Hello,
Thanks Jakub for the information. Is there any plans or timeline for this feature currently?
Jakub Mandra staff premium answered 6 years ago
We have plans for rollup implementation. First tests will have place in two weeks from now. But we can't estimate any release time.
Best
công võ answered 6 years ago
Hi @Jakub Mandra, I waiting for you about MDB to suport SSR. I'm using 4.14 ver, but still get this error
Jakub Mandra staff premium answered 6 years ago
Hi @công võ
SSR support has been added with version 4.10.0
Have you updated your mdbreact
package properly?
Try npm view mdbreact version
I recommend using npm
to update packages because yarn sometimes mixes versions from a cache.
Also, here are our tutorials about Gatsby and Next.js usage with mdbreact:
https://mdbootstrap.com/articles/react/gatsby-mdb-react-quick-start-quide/
https://mdbootstrap.com/articles/react/materialize-your-next-js-project-with-mdbootstrap-for-react/
Best,
Jakub
Jakub Mandra staff premium commented 6 years ago
Ouh there was a bug in 4.14.0 with prop types.
But it is resolved in current v.4.15.0
you can read more about the issue here: https://mdbootstrap.com/support/react/update-to-4-14-breaks-website/
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.8.4
- Device: PC
- Browser: Google Chrome 71.0.3578.98
- OS: Windows 10
- Provided sample code: Yes
- Provided link: Yes