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!
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.
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):
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.
- How to fix a Teams team with no Owners? - March 31, 2020
- How to fix “HTTP Error 500.32 – ANCM Failed to Load dll” - March 25, 2020
- Why you shouldn’t attach files from other channels in Microsoft Teams? - March 19, 2020