Issues integrating with office-ui-fabric-react

[PFAR]

Related issue report: https://github.com/OfficeDev/office-ui-fabric-react/issues/2472

Products/sites affected: JavaScriptServices + Office-UI-Fabric-React: debugging experience and server side rendering impaired

To reproduce: Create a new project using the reactredux template. Optionally in boot-client.tsx add import 'core-js/es6'; for IE11 support Add office-ui-fabric-react 4.31.0 In package.json update:

    "@types/react": "15.0.38",
    "@types/react-dom": "15.5.1",
    "@types/react-redux": "4.4.47",
    "@types/react-router-dom": "4.0.6",
    "@types/react-router-redux": "5.0.3",
    "redux": "3.7.2",
    "typescript": "2.4.2",

In Home.tsx set a breakpoint in the line return <div>, and run the project. You still have proper debugging.

Now add an Office UI button to Home.tsx. You will now receive an error caused by SSR. Edit Views\Home\Index.cshtml and remove asp-prerender-module="ClientApp/dist/main-server"

Things will now work, but the breakpoint won't hit anymore. Removing the button from Home.tsx restored the debugging experience

What I would like to know is: How can you integrate office-ui-fabric-react without breaking the typescript debugging experience How do you properly enable server side rendering for a UI framework like office-ui-fabric-react (related issues: https://github.com/aspnet/JavaScriptServices/issues/949 and https://github.com/aspnet/JavaScriptServices/issues/711)

[PFAR]

Debugging doesn't work in IE11, but it does work in Chrome. Since Chrome also has nifty React and Redux development plugins I won't mind using this workaround. So this would only leave open the challenge of getting SSR working...

[SteveSandersonMS]

You will now receive an error caused by SSR.

You didn't mention what specific error, but is it something like "Cannot read property of window/document" or another similar error due to office-ui-fabric-react requiring a browser-specific API?

If so, you'll need to make sure you don't rely on browser-specific APIs during server-side prerendering. You can use techniques such as if (typeof windows !== 'undefined') { ... } or varying your app config based on whether it's being bootstrapped by boot-client.tsx or boot-server.tsx to control this. Of course, the nuclear option is just to disable server-side prerendering completely if your app is too tightly coupled to browser-specific APIs.

You might also consider contacting the maintainers of office-ui-fabric-react to see if they will update it not to rely on browser-specific APIs. Other UI toolkits such as angular-material have been able to achieve this.

[PFAR]

@SteveSandersonMS : This office-ui-fabric-react also originates from Microsoft, and it somehow would make sense if both projects can work with each other or can help find a workaround to get SSR to work.

They describe a workaround here: https://github.com/OfficeDev/office-ui-fabric-react#rendering-fabric-components-on-the-server-ssr but I've not yet managed to get this approach to work with the reactredux template.

The exact error message is:

Exception: Call to Node module failed with error: Prerendering failed because of error: ReferenceError: document is not defined
at registerStyles (C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:881:16)
at applyThemableStyles (C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:766:13)
at C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:708:13
at measure (C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:663:5)
at Object.loadStyles (C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:695:5)
at Object.defineProperty.value (C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:14066:22)
at __webpack_require__ (C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:26:30)
at Object.defineProperty.value (C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:5677:21)
at __webpack_require__ (C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:26:30)
at Object.defineProperty.value (C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise\ClientApp\dist\main-server.js:12694:16)
Current directory is: C:\Users\peter\Documents\Visual Studio 2017\Projects\Enterprise

I hope your case-closed decision can still be reconsidered...

[SteveSandersonMS]

Thanks for the extra info.

The error message does imply it's an issue with office-ui-fabric-react taking a dependency on a browser API (document is not defined). But since their docs indicate that they consider Node-based SSR to be a supported use case, they will probably be happy to work with you on fixing that.

I hope your case-closed decision can still be reconsidered...

It's only closed because there are no further actions we can take on the code in this repo that would help in any way.

[StevenRasmussen]

@PFAR - Were you able to resolve this? I'm running into the same issue and trying to figure out how to get SSR, AspNetCore 2.0 and Office UI Fabric React working together. Any solution you found would be much appreciated.

[NickSevens]

@SimplerSoftware @PFAR any luck? I'm interested as well :) tnx