SPFx webpart fails with "Failed to load component -

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

2 min read.

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.

Author
Recent Posts

Antti K. Koskela

Developer / Speaker / Consultant at Koskila / Precio Fishbone / Norppandalotti Software Co / Alter - Experience Ideas Ltd

Antti Koskela is a proud digital native nomadic millennial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as Solutions Architect for Precio Fishbone, building delightful Digital Workplaces.

He's been a developer from 2004 (starting with PHP and Java), and he's been working on .NET projects, Azure, Office 365, SharePoint and a lot of other stuff. He's also Microsoft MVP for Azure.

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

Latest posts by Antti K. Koskela (see all)