React Server Side Rendering Errors


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/


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