Epic Visio Skills produced this cool illustration of Microsoft Teams extensibility!

How to Teamsify an SPFx solution?

This post describes how you can modify your SPFx webparts to make them compatible with usage in Microsoft Teams. I’m also showing some basic ideas what you can do in the code to make the integration more useful! Why would we do this? Who wouldn’t want to just develop once and then run their code everywhere? Now with SPFx (SharePoint Framework) 1.8 being out (and 1.9 being out for a while before being pulled!), we’re getting one step closer to that, as we’re given an…Continue reading How to Teamsify an SPFx solution?

Microsoft Teams context in SharePoint Framework client-side code.

How to solve the error “Property ‘microsoftTeams’ does not exist on type ‘WebPartContext’.”

This article explains how to fix an issue where you’re just minding your own business, trying to access the Microsoft Teams context in your SPFx webpart’s WebPartContext via the built-in property microsoftTeams, but you run into an issue. Simple stuff, but it’s still easy to run into this one, so I think it’s worthwhile to document the solution somewhere. Problem Most likely, the line causing you issues looks something like this: this.context.microsoftTeams. Of like shown below in Visual Studio Code: This error will lead to…Continue reading How to solve the error “Property ‘microsoftTeams’ does not exist on type ‘WebPartContext’.”

"npm outdated" showing my @microsoft/sp- packages being badly outdated.

How to update your SPFx webpart to a new version of SharePoint Framework

Instead of being stuck on whatever version your SPFx project was originally created with, it’s possible and sometimes required to upgrade it afterwards to gain access to newer functionalities like integration with Microsoft Teams. This process, to me, is comparable to updating the .NET Framework version in your classic web application projects – while it’s sometimes a matter of simple configuration change and a rebuild, most of the time there’s a bunch of steps included and not all of them might be obvious or anywhere…Continue reading How to update your SPFx webpart to a new version of SharePoint Framework

[SPLoaderError.loadComponentError]: ***Failed to load component "9951b316-c8f2-4e27-887a-b7a46b3e94a0" (ContosoSPFxWebPart). Original error: ***Failed to load path dependency "ContosoSPFxWebPartLocalization" from component "9951b316-c8f2-4e27-887a-b7a46b3e94a0" (ContosoSPFxWebPart). Original error: Error loading https://component-id.invalid/9951b316-c8f2-4e27-887a-b7a46b3e94a0_1.3.1/ContosoSPFxWebPartLocalization Unable to load script https://contoso.sharepoint.com/sites/contosoapps/ClientSideAssets/490f3be2-7e8a-4fe5-8d6b-49ae5d7c4a2e/s-ContosoSPFxWebPartLocalization_en-us_2b301efaa958eadafbad865f710d89e4.js ***INNERERROR: ***Failed to load path dependency "ContosoSPFxWebPartLocalization" from component "9951b316-c8f2-4e27-887a-b7a46b3e94a0" (ContosoSPFxWebPart). Original error: Error loading https://component-id.invalid/9951b316-c8f2-4e27-887a-b7a46b3e94a0_1.3.1/ContosoSPFxWebPartLocalization Unable to load script https://contoso.sharepoint.com/sites/contosoapps/ClientSideAssets/490f3be2-7e8a-4fe5-8d6b-49ae5d7c4a2e/s-ContosoSPFxWebPartLocalization_en-us_2b301efaa958eadafbad865f710d89e4.js ***CALLSTACK: Error at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:889:16049) at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:1512:21125) at Function.e.buildErrorWithVerboseLog (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:1512:16214) at Function.e.buildLoadComponentError (https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:1512:12245) at https://spoprod-a.akamaihd.net/files/sp-client-prod_2019-03-15.008/sp-pages-assembly_en-us_2676c0dcef2e33d08d5b8433ef878499.js:1512:60385

SPFx webpart fails with “Failed to load component – – There was a network error.”

SPFx development is a bottomless bag of funsies! This article describes yet another way how to fix the error with your SPFx webpart failing to load a module. In this case, you’ll get an error that starts with the generic “Failed to load component” -part, but contains “There was a network error” later in the stack. I’ve written about this before, but I keep running into new ways to mess up, so I’ll keep documenting the solutions as well! Problem So, this one left me…Continue reading SPFx webpart fails with “Failed to load component – – There was a network error.”