Add external libraries in SPFx?

Question

How to add external libraries like material-ui to our Spfx Webpart?

I know to add external libraries having their CDN link and types definition like jquery but don't know how to add libraries which have their type definition but do not have CDN link like material-ui.

Please tell if anybody had worked on such libraries.

Answer 1

I think you could enable CDN for your Office 365 tenant so you could upload your JS library to SharePoint online and load from it.

Below sample list steps to enable CDN for Office 365 tenant.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/hosting-webpart-from-office-365-cdn

Or, another approach like below sample.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/connect-to-sharepoint-using-jsom

Update:

Sample test with material ui(I'm not familiar with material ui currently, but it's based on React DOM, so I use React as my SPFx framework and insatall material ui by npm, seems working, when bundle the assets, the script will be 'translate' to javascript).

Answer 2

To install: npm install material-ui

To install types: npm i @types/material-ui

To use: Lee_MSFT is doing it correctly and there IS NO CDN referenced for types as you can see he's using in his example the package from NPM.

IF YOU purely want the types then Google 'npm' + library name + 'types', library name is the only dynamic thing here so your search will look like so: npm material-ui types

So in short use CDN links: https://jquery.css etc

OR

use packages e.g.: npm install jquery @jquery-types

Using both at the same time for same library can make you confused.