Persist middleware keeping old versions of functions around. Breaking apps when deploying to prod

[Paul Sender]

Summary

I'm using the persist middleware to keep data available through multiple browser tabs. I recently made some changes to my store that uses the persist middleware. Mainly, I'm no longer exporting the entire store but just custom hooks as described here: https://tkdodo.eu/blog/working-with-zustand#only-export-custom-hooks. After I made this change I noticed my local browser environment was unable to find the new function changes I made. I checked localStorage and saw the new functions were not there but the old ones still were. This is the root of the issue. In dev land I simply cleared my localStorage and continued on. When I deployed the changes though, I naively assumed the browser storage would get recreated with a new build which it did not. As a result, user's saw the function not found error when trying to execute code that attempted to use it.

This doesn't seem like a bug really so my question is, how should I be maintaining a persisted store? I should be able to make changes to functions/state and have it not brick prod once deployed. Is there a way to clear localStorage when store changes are made? Is that even the right move? Also wondering what the best way to test something like this would be? Our E2E test pipeline didn't pick up the error bc cypress creates new browser windows for every tests (therefore side stepping this issue).

Any guidance would be appreciated.

Check List

Please do not ask questions in issues.

• I've already opened a discussion before opening this issue, or already discussed in other media.

Please include a minimal reproduction.

• Not sure how to repo this with a sandbox since its depended on localStorage functionality