Search Results Webpart Caching

[mahajangaurav]

Version used
4.8

Describe the bug
The search results webpart seems to be caching UI elements.

To Reproduce
Here are the steps to replicate:

1. Install version 4.8 by downloading the release package and uploading it to the App catalog
2. Add the webpart to a modern page, publish and then access the page
3. Now download the v4.8.0 source code from the release page
4. Make a change to a component - I specifically needed to incorporate this fix from version 4.9.0 so just incorporated that change in the downloaded version of the 4.8 code
5. Increment the version # in package.json, package-solution.json to 4.8.1, 4.8.1.0 respectively
6. Run npm install, gulp clean, gulp bundle, gulp package-solution --ship to cleanly build and package the v4.8.1solution
7. Upload the package to the app catalog, thus upgrading the existing web part. Confirm the version is upgraded to 4.8.1 on the app catalog page
8. Enable the app and also confirm the files under sites/appcatalog/ClientSideAssets/59903278-dd5d-4e9e-bef6-562aae716b8b have been updated with the latest timestamp
9. Confirm that the modern-search-results-web-part_78350883ce1c49dae173.js file under that folder contains the latest changes which were made locally to the 4.8.1 web part
10. Give it a couple of minutes and browse to the page where the webpart was originally added
11. The fix does not show up, even after hard refreshing the page
12. Open an incognito window and browse to the same page
13. You can see the fix there
14. Clearing the browser's app cache in the original browser session also results in showing the latest changes

Expected behavior
We would expect to see the updates made to the local version 4.8.1 to show up on the page containing the web part without having to clear the browser app cache. We have thousands of users accessing the sites/ pages and unfortunately cannot have them refresh their browser cache.

An interesting thing to note is that when I download a newer version of the package (ex: 4.9.0) directly from the release page, the web part updates in fact do get reflected without having to clear the cache. To me, it therefore seems that something else needs to happen as part of the build/ publish process when publishing the locally built solution. Please also see my note below for similar issues we are facing with the search extensions which we have created.

Screenshots
None

Desktop (please complete the following information):

• Browser: latest versions of Edge and Chrome
• OS: Win 11 but have seen on Win 10 as well

Additional context
We have consistently seen this issue with changes we've made to the UI elements in our search extension code too, but the current issue is more critical. I feel this is likely some configuration issue since I don't see any UI caching issues reported by anyone else. Also, as mentioned above, directly uploading a release package downloaded from this repo does not result in this issue. I have banged my head for a couple of weeks now without a solution for this. I admire this team a lot and am hoping you can provide some guidance or direction towards resolving these caching issues. Upgrading the web part to a newer published version is not an option due to the number of places the web part is being used and the resulting need for major testing. Plus, like I mentioned, we are consistently seeing this issue in our extension code as well where publishing a newer version requires users to clear the browser cache before users can see any UI changes.

Thank you and we'll await your urgent response if possible

[wobba]

Updating a sppkg is not a web part specific issue but SPFx related. Depending on how you have or have not set up CDN, caching does take place. You can try to delete the sppkg, then re-add it instead of upgrading. That seems to often work better in my experience.

[wobba]

If you manually update versions, ensure to update them in all files before building. Or just keep the same version and overwrite - should work just fine.

[mahajangaurav]

Thanks again, @wobba
Yes, I did update the versions in all files. Here's another test I performed, which also confirms my belief that there's an gap with the publishing process or configuration:

1. I installed v 4.8.0 and added it to a page
2. I then downloaded the source for v4.11.1 (the latest version)
3. I built/ published the package using this source and then uploaded it to the modern app catalog
4. Waited some time and then refreshed the page but the updated version does not show up (I still see the v4.8.0) web part on the page

The webpart does refresh however, if I directly download the package from the releases here.

Interestingly, I did find differences between the package which was created after I locally built and packaged it vs what I downloaded from the release page. Are you able to share the exact commands used to build and publish the package?

I've been using gulp bundle and gulp package-solution --ship

Anything else you can recommend will be very valuable.

I know you are busy so greatly appreciate your replies.

[mahajangaurav]

So I found what we were doing wrong. I realized after I sent you the earlier message.
Should have used gulp bundle --ship instead of gulp bundle I am all set at my end.
My most sincere apologies for having taken your time on this and THANK YOU again for your patience.

[wobba]

This is what I use, and bundle is the default action.

gulp clean
gulp --ship
gulp package-solution --ship

Then use the sppkg from the sharepoint/solutions folder.