dotnet react template & office fabric UI - Invariant Violation: addComponentAsRefTo(...) #175

New Issue

fergalmoran · 2025-08-09T17:15:17Z

fergalmoran commented

2025-08-09 17:15:17 +00:00

Originally created by @pawel-tomkowski on 2/12/2018

Hello everyone,
when I try use office fabric ui in my project and import component for example panel I have this error https://i.stack.imgur.com/YofNd.png. I also recorded this behavior https://giphy.com/gifs/3ohjV6gZTxE8TiqVfa

Steps:

I created project by dotnet new react
I install office by npm --save install office-ui-fabric-react
I import Fabric component to boot.tsx and I use it.
I import Panel component to Layout.tsx and I use it.
When I clicked button to activate, in console appear error Exception in Layer.componentDidUpdate(): Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

I put my code on repo https://bitbucket.org/vaalgrindalone/dotnet-react-template-office-fabric-ui-issue/src
I try make alias react in webpack by resolve.alias but nothing happen. I also try put react to external and import it from cdn in html file, bo this is not good solution. I think that my configuration is incorrect.
Cheers.

*Originally created by @pawel-tomkowski on 2/12/2018* Hello everyone, when I try use office fabric ui in my project and import component for example panel I have this error https://i.stack.imgur.com/YofNd.png. I also recorded this behavior https://giphy.com/gifs/3ohjV6gZTxE8TiqVfa Steps: 1. I created project by *dotnet new react* 2. I install office by *npm --save install office-ui-fabric-react* 3. I import Fabric component to boot.tsx and I use it. 4. I import Panel component to Layout.tsx and I use it. When I clicked button to activate, in console appear error Exception in *Layer.componentDidUpdate(): Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded* I put my code on repo https://bitbucket.org/vaalgrindalone/dotnet-react-template-office-fabric-ui-issue/src I try make alias react in webpack by resolve.alias but nothing happen. I also try put react to external and import it from cdn in html file, bo this is not good solution. I think that my configuration is incorrect. Cheers.

fergalmoran closed this issue

2025-08-09 17:15:17 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#175