Topic: React Server Side Rendering Errors

datashield free asked 5 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 answered 5 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 commented 5 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/


công võ free answered 5 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 answered 5 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


datashield free answered 5 years ago


Hello,

Thanks Jakub for the information. Is there any plans or timeline for this feature currently?


Jakub Mandra staff answered 5 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: 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