Referencing office-ui-fabric-react as external

[ghost]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

As I have multiple webparts in my project, I would like to reference office-ui-fabric-react as external, so that it does not get bundled with each webpart.

If I simply add the reference in externals in config.json, i do have an external file generated, and my webparts files go from ~800kb to ~100kb. But when I test it in the workbench, or in a "production" site, I get an error saying the component has a dependency on a module "office-ui-fabric-react" that is not referenced in the manifest. Error goes away if I add a "globalName" in my external reference in config.json (procedure for non AMD modules). But then a javascript error occures because it gets loaded before React.

However, doing researches, I find in the official documentation that I should use Fabric React that shipped with the generator. Samples show non external references.

Scaffholded a new project with latest version of the generator. I take all references in package.json, update my project's package.json and reinstall everything in node_modules. I still need to add (npm install) office-ui-fabric-react in my project to be able to reference its components

My question is :

1. Should I reference office-ui-fabric-react as external ? Is it still supported ?
2. Should I be able to reference office-ui-fabric-react without adding it with npm install ?

Thanks !

[nickpape]

You were following this guidance: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library#share-a-library-among-multiple-web-parts ?

You should be able to reference office-ui-fabric-react as an external, but you must npm install it first. What will happen is that a separate chunk (JS file) will be created containing all the office-ui-fabric-react code. This chunk will be shipped along with your web parts.

One thing to be aware of is that office-ui-fabric-react has breaking changes from time-to-time so it cannot be packaged in the same way as the SPFx Framework libraries, which are guaranteed to be backwards compatible.

[VesaJuvonen]

hi @SPParseError, since seems to be answered by our engineering, closing for now. Let's reopen if needed. Thx.

[ghost]

Hi,

I tried it once again.

Here is my externals section in config.json :

Here is my import statement in the webpart :

I have this error when running gulp serve :

Looks like I would need to add a "globalName" statement in the external declaration. If I do, I don't have this error. But then the code fires an error saying "React" does not exist, and I can't declare "React" as a dependency in externals.

@VesaJuvonen should we reopen it ?

[jonthenerd]

Seeing the same behavior @SPParseError . This makes it a particular pain to externalize any module that has a dependency upon React. The version of React that loads into the page (15.6.2 at this time) doesn't expose itself as a global variable, which office-ui-fabric is trying to access.

[harshdamaniahd]

Any solution?

[VesaJuvonen]

It is not unfortunately supported to reference Office UI Fabric as an external package as that will cause you version exceptions. Recommendation and how to use Office UI Fabric React is covered in following documentation - https://docs.microsoft.com/en-us/sharepoint/dev/spfx/office-ui-fabric-integration. If you have any issues with this, would suggest to open a new issue so that your comments or findings will not get buried on closed issues.

[nishantverma-nagarro]

The UI Fabric React was not working using the node_module link. So we got a workaround to fix this issue.
Add the CDN path and globalName of the to config.json
"externals": {
"office-ui-fabric-react": {
"path": "https://unpkg.com/[email protected]/dist/office-ui-fabric-react.min.js",
"globalName": "Fabric"
}
}

This will compile properly. However if you deploy and add the web part to a page it will through react not found error.
To remove the react error I added the CDN path to the page using SEWP on classic page. In case of Modern page you can create extension to add the react js.

Once this is done the web part loads fine.

I know this is not the correct way but this will get your web parts working and will not create large bundle files.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues