SharePoint workbench not reflecting changes

Question

I'm building a SharePoint SPFx react web app. I've been using workbench for the last few weeks and it's been great. However, today when I did gulp serve I noticed that my changes are no longer being reflected. However on the temp workbench it's working just fine.

So when I go on: https://mysite.sharepoint.com/sites/Example/_layouts/15/workbench.aspx#/ and select my webpart it's displaying like a cached version.

However when I go to: https://localhost:4321/temp/workbench.html#/ it works just fine every change I do is reflecting.

I've tried clearing my cache, closing and reopening a new browser, tried a different browser, running npm clean followed by npm build , also tried deleting node_modules and reinstalling. Nothing seems to fix it. And I'm not getting any errors when I build or run gulp serve any ideas?

Answer 1

When you are trying to run the webpart on the SharePoint site workbench then close the window of the local workbench(https://localhost:4321/temp/workbench.html#/) and then check if the changes are reflecting or not.

OR

run "gulp serve --nobrowser" and then append

?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true

to any page in the https://mysite.sharepoint.com/sites/Example/. This will allow to debug the webpart in the SharePoint page.

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/debug-modern-pages