[MGNLFE-23] Enable Server-Side Rendering Created: 11/Feb/20  Updated: 09/Dec/20  Resolved: 21/Apr/20

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: None
Affects Version/s: None
Fix Version/s: 1.0.1

Type: Improvement Priority: Critical
Reporter: Christopher Zimmermann Assignee: Lam Nguyen Bao
Resolution: Fixed Votes: 7
Labels: None
Remaining Estimate: 40d 6.5h
Time Spent: 3.5d
Original Estimate: Not Specified

Issue Links:
relation
is related to MGNLCE-333 Test to ensure that SSR is supported Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Date of First Response:
Epic Link: SPA Editor
Sprint: 6.2.1 Ramp-up 22
Story Points: 2

 Description   

Libraries cause errors and failed builds when doing SSR because "window" object is not available when rendering in Node on the server, rather than in the browser. SSR is important for SPA projects and is used on most Magnolia SPA enterprise projects that I am aware of.

Window object can still be used but it must be wrapped in a check if the object is available, or a special library to handle the problem can be used, such as "global" on npm.

 

ReferenceError: window is not defined
    at Object.<anonymous>

This seems to be primarily related to the webpack build - as the built libraries include 'window'.

 

A few resources on the topic:

https://webpack.js.org/configuration/output/

https://sitecore.stackexchange.com/questions/16437/ssr-issue-window-not-defined

https://stackoverflow.com/questions/38951721/react-js-server-side-issue-window-not-found

 

 



 Comments   
Comment by Christopher Zimmermann [ 16/Mar/20 ]

Looks like 2 problems.

First an SSR cannot build do to a thing in webpack 4.

Solution: https://webpack.js.org/configuration/output/

globalObject: 'this'

"When targeting a library, especially when libraryTarget is 'umd', this option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set output.globalObject option to 'this'."

 

Secondly - the libraries themselves must check for existance of 'window' object before using it. ie

if (typeof window !== 'undefined') {
...blah blah window ....
}
Comment by Christopher Zimmermann [ 31/Mar/20 ]

I have a test case prepared which I can share.

Comment by Christopher Zimmermann [ 15/Apr/20 ]

Test case: https://git.magnolia-cms.com/users/czimmermann/repos/spa-ssr-testcase/browse
(And see comment above from March 16)

Generated at Mon Feb 12 05:43:28 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.