[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.”

This post was most recently updated on June 26th, 2019.

Reading Time: 2 minutes.

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

Table of Contents

So, this one left me scratching my head for a while. I had just fetched a codebase for a few SPFx webparts from our Git repository, started debugging – but wouldn’t get it to work. There was nothing I did differently since the last time I had done the same, but it just wouldn’t work.

No matter how I would build, package and deploy the webpart, I always got one of the few errors related to loading a module. The error didn’t bring up any meaningful results on Google, and the same code was building just fine on our build machines, so it had to be an environmental thing.

Solution

The solution ended up being easy – but it only applies to some cases.

First, make sure the code you have is actually supposed to work! Verify the build pipeline is/was all green for this particular commit, and if possible, test the commit in another environment (or have a colleague do it).

However, if that’s all good and you’ve hence narrowed the issue down to your environment, the solution below might help you!

I had recently updated my Node version, so I needed to run npm rebuild. It went through without errors, but in this case that wasn’t apparently enough: I needed to run npm install as well.

So, in short, in case you get seemingly irrational errors when code is built and deployed, but your colleagues don’t experience the same issues with the same code, run this in your VS Code’s terminal (or command line, after navigating to project’s directory):

npm install

The command will take a while to complete, but with any luck, after that you’re good! If not, just go ahead and remove the whole node_modules folder, and re-run npm install after that.

Antti K. Koskela

Antti Koskela is a proud digital native nomadic millenial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as a Solutions Architect for Valo Intranet, the product that will make you fall in love with your intranet. Working with the global partner network, he's responsible for the success of Valo deployments happening all around the world.

He's been a developer from 2004 (starting with PHP and Java), and he's been bending and twisting SharePoint into different shapes since MOSS. Nowadays he's not only working on SharePoint, but also on .NET projects, Azure, Office 365 and a lot of other stuff.

This is his personal professional (e.g. professional, but definitely personal) blog.

Leave a Reply

avatar
5000
  Subscribe  
Notify of