[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: |
|
||||||||
| 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 |