SharePoint hosted workbench showing cached version

Question

I have a SharePoint SPFx react web app. When running gulp serve on my local workbench, all changes are being reflected.

However when I access the SharePoint hosted workbench using the following URL: /_layouts/15/workbench.aspx , looks like a cache version. In fact it looks like the current live version in the app catalog. So if I were to build and ship the app and add it to the app catalog and then refresh the hosted workbench only then will I see any changes.

Previously as well if gulp serve was not running, and I tried adding the webpart to the hosted workbench, I would get an error stating I need to serve the app for it to work. I no longer get that error. This seems to be the case now for all my SPFx webapps not just this one.

It just doesn't seem like my hosted workbench is connected to any of my apps anymore. Basically when I load the hosted workbench it just shows the current webpart version found on the app catalog, not the one being served. I tried following the following threads with no success. The debug will not work since it seems to be a different version loading:

SharePoint workbench not reflecting changes

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

UPDATES: I removed the app from the app catalog + recycling bin and now I can see the current version on the hosted workbench when I run gulp serve however the second I re-add the app to the app catalog, the hosted workbench goes back to that version of the app

Answer 1

In fact it looks like the current live version in the app catalog.

Do you already have in your App Catalog a Web Part deployed with the exact same name? If so, it is quite possible that what you are seeing in the workbench is the app from the catalog, not the one you are testing.

Maybe try to give your test app a slightly different name. Or ideally use a dedicated test environment such as a free developer tenant instead of your production environment.