Issues integrating with office-ui-fabric-react #501

New Issue

fergalmoran · 2025-08-09T17:16:32Z

fergalmoran commented

2025-08-09 17:16:32 +00:00

Originally created by @PFAR on 8/16/2017

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)

*Originally created by @PFAR on 8/16/2017* **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)

fergalmoran closed this issue

2025-08-09 17:16:32 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#501