Packaging SPFx Samples

Question

I'm trying to package up some SharePoint webparts from GitHub https://github.com/SharePoint/sp-dev-fx-webparts

Document Library https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-documents-detailslist

The goal is to bring in a doc library from a different site collection in SharePoint

Security Grid https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-securitygrid

The Security Grid will allow my teams quick access to control who has access to what files on the various site libraries.

I'm using VS Code, NVM, NPM, and Gulp. The Doc Library Webpart is SPFx GA (1.0). Using nvm I set node to install v6.17.1 with the following results

added 1691 packages from 1741 contributors and audited 111373 packages in 323.901s
found 884 vulnerabilities (295 low, 34 moderate, 548 high, 7 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

After that I run a 'gulp clean & gulp bundle --ship & gulp package-solution --ship' without issue.

I deploy the package to my O365 Tenant but keep getting this error when trying to add it to a SharePoint page.


Something went wrong
If the problem persists, contact the site administrator and give them the information in Technical Details.
Technical Details
[SPLoaderError.loadComponentError]:
***Failed to load component "8635c52e-cf0b-4c6d-a5ba-66f1d8d92005" (LibraryDocumentsWebPart). Original error: ***Failed to load URL '/sites/dev03/Style Library/CDN/react-documents-detailslist-librarydocumentswebpartstrings_en-us_f6b12acaf67a67cf5971e8da720715f9.js' for resource 'LibraryDocumentsWebPartStrings' in component '8635c52e-cf0b-4c6d-a5ba-66f1d8d92005' (LibraryDocumentsWebPart). The file was not found in the server.

***INNERERROR:
***Failed to load URL '/sites/dev03/Style Library/CDN/react-documents-detailslist-librarydocumentswebpartstrings_en-us_f6b12acaf67a67cf5971e8da720715f9.js' for resource 'LibraryDocumentsWebPartStrings' in component '8635c52e-cf0b-4c6d-a5ba-66f1d8d92005' (LibraryDocumentsWebPart). The file was not found in the server.
***CALLSTACK:
Error
   at t (https://spoprod-a.akamaihd.net/files/sp-client/sp-loader-assembly_en-us_3993179394b3b04563388c5043768f22.js:3:53337)
   at t (https://spoprod-a.akamaihd.net/files/sp-client/sp-loader-assembly_en-us_3993179394b3b04563388c5043768f22.js:1:139106)
   at e.buildErrorWithVerboseLog (https://spoprod-a.akamaihd.net/files/sp-client/sp-loader-assembly_en-us_3993179394b3b04563388c5043768f22.js:1:149068)
   at e.buildLoadComponentError (https://spoprod-a.akamaihd.net/files/sp-client/sp-loader-assembly_en-us_3993179394b3b04563388c5043768f22.js:1:145093)
   at Anonymous function (https://spoprod-a.akamaihd.net/files/sp-client/sp-loader-assembly_en-us_3993179394b3b04563388c5043768f22.js:1:135256)

Any help for a new programmer?

I assume you've checked whether the file '/sites/dev03/Style Library/CDN/react-documents-detailslist-librarydocumentswebpartstrings_en-us_f6b12acaf67a67cf5971e8da720715f9.js' does in fact exist or not? — willman
It is not. I also checked the style library for the site that the webpart was installed <https://<tenant>.sharepoint.com/Style Library but nothing is in there either. — crfarnsworth
Do you have the includeClientSideAssets attribute set in your package-solution.json? Also, look in your debug folder under the sharepoint folder where your .sppkg file is built to see what files were included in the package. — willman
It does not. I found this link and now have the includeClientSideAssets: true added to the package-solution.json and now get this error Additional properties not allowed: includeClientSideAssets — crfarnsworth

willman willman · Accepted Answer · 2020-02-13T01:49:40

Support for including client assets in the package was not added until version 1.4 of the SharePoint Framework. Prior to that, you would need to deploy those additional assets manually. See this thread describing a similar issue, and this official doc on how to update your framework.

Packaging SPFx Samples

1 Answers