I have a React app, I am using Parcel as my bundler. I want to use "office-ui-fabric-react" components. Everything works fine up until I import a Component from "office-ui-fabric-react" (Office Fabric Ui).
This is the error message I get from console -
TypeError: can't redefine non-configurable property "ChoiceGroupOption".
I have ensured that all dependencies are installed ("office-UI-fabric-react" does not require any stated dependency).
I then set up a new React project, this time using Create-React-App command to generate the boilerplate. This version doesn't have any issues, even after importing components from "office-ui-fabric-react", it works ok
import { PrimaryButton } from "office-ui-fabric-react
//just add this line to a Reactjs project using parcel
TypeError: can't redefine non-configurable property "ChoiceGroupOption"
Based on @VitalieBraga 's recommendation, the solution to this issue is to reference the specific module for every office-UI react component to be imported. For example
import { PrimaryButton } from "office-ui-fabric-react/lib/button";
import { ChoiceGroup,IChoiceGroupOption} from "office-ui-fabric-react/lib/ChoiceGroup";
this actually addresses the issue I had, but in regards, the issue of importing multiple components on a single line this is not possible with Parcel.
import { css, classNamesFunction, DefaultButton, IStyle, Label, PrimaryButton } from 'office-ui-fabric-react';
The other alternative is to use Webpack as against Parcel