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

mm
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments