Problem

SharePoint Framework (SPFx) offers a flexible approach to building custom solutions for Microsoft SharePoint that leverage modern web development technologies.

Recently whilst deploying a SharePoint Framework (SPFx) solution into a SharePoint Online environment, I encountered intermittent caching issues and 404 failures. There was no clear pattern as to why the issues would occur. After staring at the code and pulling my hair out, I eventually came across a solution…

In this post, I’ll be sharing the solution that worked for me.

SharePoint Framework Logo

Solution

This above SPFx deployment issue seems to be a widespread issue that has been experienced by many other developers. You can find more information about it here – https://github.com/Sharepoint/sp-dev-docs/issues/3802.

After trying various solutions, this is ultimately how I solved the issue:

  1. First, you must remove the SPFx solution from your SharePoint environment: This includes removing it from SharePoint pages, from the Site Contents for the given SharePoint site and removing the SPFx solution package from the SharePoint App Catalog.
  2. The next step is to generate a new GUID identifier for your SPFx custom solution. Every SPFx solution has a unique identifier to help identify it in your SharePoint environment. You can use online tools such as GuidGen to generate a new GUID.
  3. After generating the new GUID, the next step is to update the package-solution.json and .yo-rc.json files with the new GUID. These files contain information about the solution file, including the GUID, version number, and other important details.
  4. The final step is to redeploy the SPFx solution into your SharePoint environment. The issue should no longer occur as the new GUID will stop SharePoint from using the existing cached SPFx solution. In my case, it completely solved the issue for me. It’s a bit of a hassle but hey, at least it resolves the issue!

Final Thoughts

Well, I hope this solution has helped you to solve your SharePoint Framework SPFx solution deployment issue. If you find any other solutions, feel free to share them in the comments below to help others out there. Happy coding! 🙂

Shane Bartholomeusz