Two Pages in one Page bug

[LeonBuchner]

Describe the bug
Two Pages are on one page, only the second part changes on url change.

To Reproduce
Steps to reproduce the behavior:

1. Put a product into the cart
2. open the cart
3. click on checkout
4. when you reach the shopify checkout, press the back button of your browser until you are back in your shop
5. You will have the same page under the current page, when you change the page now, nothing will happen because the second page under the current one will update

Expected behavior
Only one Page

Screenshots

Desktop (please complete the following information):

• MacOS Monterey 12.2.1
• Google Chrome (latest)

Additional context
Its good again when you hard refresh the page

[adebiyial]

Taking a look at this @LeonBuchner.

[joshistoast]

I've seen this happen a lot when an hmr is triggered, I believe this is a Nuxt issue and not an issue with NuxtShop.

[rylanharper]

@adebiyial any update on this? Seems like a hydration issue pertaining to the cart storage.. Maybe loading the persisted state after initial render is the fix? Something similar to $nextTick though that is somewhat and ugly fix. I have had this happen in Shopify stores before.. Not necessarily a double payload, but the site breaking due to a cart storage issue.

This issue is really the only major bug in this project and pretty much always happens when a user comes back to the site after heading to the Shopify checkout page (which is important to fix and happens regularly). I fixed this in the past using vuex-persistedstate but that is no longer supported.