How to Uninstall SPFx Tool Chain

Introduction

Sometimes, it is necessary to uninstall SPFx and start from the fresh install. In this article, we will go through the steps needed. This is focused on NVM (Node Version Manager)model, which is developing SPFx using nvm. The advantage of nvm is it isolates the versions of node, which helps to run different SPFx versions in the same machine. The process of setting up nvm for SPFx development is mentioned in references section.

Uninstall SPFx Tool Chain

Step 1. First, remove the node version for which the SPFx is running. For this, open the terminal/command prompt and check for nvm version. In this particular case, I want to remove SPFx 1.11.1.

If you observe, the current node version 10.24.1 hosts the following tool chain.

• @microsoft/[email protected] (SharePoint framework tool)
• [email protected] (gulp engine to run the tasks)
• [email protected] (node packet manager to install and maintain the dependencies)
• Yo (template generator)

Using NVM we can only remove the version of the node, which will automatically delete this tool chain. You do not have to individually remove these tools.

Step 2. Remove the node by switching to a different version. In the current machine, I have more than 1 node versions running.

Step 3. To remove version 10.24.1, it is required to switch to a different version. Here, I am choosing the next higher version 14.15.0. Just run command.

nvm use 14.15.0

Step 4. As you see now, the green arrow is shifted to node version 14.15.0

You can also validate the current node by running node –version

Step 5. Run the command

Nvm uninstall 10.24.1

Step 6. Run the below command to clean the cache caused by npm

Npm clean cache –force

Step 7. Try to clear the users cache. For the Mac OS the cache is stored at ~Library/Caches

Go to finder -> hit CMD+SHIFT+G and then type in ~/Library/Caches

Step 8. Look for the folder node-gvp and remove the folder that has the version of node that is uninstalled. In this case, the version is 10.24.1

Note:  In Windows, the cache folder is located at c:\users\<USERNAME>\appdata\Roaming\npm-cache

Conclusion

Thus, in this article, we have seen how to clean up SPFx tool chain in your developer environment using NVM.

References

• https://www.c-sharpcorner.com/article/setting-up-spfx-developer-environment-using-nvm
• https://dev.to/ajeetraina/how-to-install-and-configure-nvm-on-mac-os-5fgi
• https://www.warp.dev/terminus/clear-npm-cache
• https://coder-coder.com/npm-clear-cache