Hydration issue when the user reload the cart page

[Simon-Renault]

When you reload the page on the cart using the reload button or "cmd + r" the page experience some weird behaviours :

• the checkout disappear and is replaced by the empty state
• Impossible to navigate between pages

Two errors visible in the console :

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.appendChild (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:40599)
    at h (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:53331)
    at f (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:52962)
    at d (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:53417)
    at A (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:56755)
    at A (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:56690)
    at a.__patch__ (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:57155)
    at a.t._update (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:34391)
    at a.r (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:64471)
    at fn.get (https://shop-2.vercel.app/assets/js/app.1e8cb306.js:7:26651)


app.1e8cb306.js:7 TypeError: Cannot read property '_isDestroyed' of undefined
    at destroy (app.1e8cb306.js:7)
    at _ (app.1e8cb306.js:7)
    at _ (app.1e8cb306.js:7)
    at _ (app.1e8cb306.js:7)
    at _ (app.1e8cb306.js:7)
    at a.__patch__ (app.1e8cb306.js:7)
    at a.t.$destroy (app.1e8cb306.js:7)
    at destroy (app.1e8cb306.js:7)
    at _ (app.1e8cb306.js:7)
    at a.__patch__ (app.1e8cb306.js:7)```

[travis-r6s]

@Simon-Renault Yes, I have noticed that - I believe it is to do with the Vuex persisted plugin I am using: try removing that, and everything should work as expected. Not quite sure why it happens though, that needs more investigating.

In the most recent storefront-ui branch I have actually replaced it...

[Simon-Renault]

I have a fix for that, simple but not super pretty. The issue does not seems to happen if you load the state after the initial render. So just triggering the store update directly after the first render should be fine. Using nextTick to retrieve and commit the saved state.

 store.subscribe((mutation, state) => {

        if(mutation.type === 'updateCart'){
            localStorage.setItem("cart",JSON.stringify(state.cart))
        }
        
    })

and in the cart page/component

 mounted(){
    this.$nextTick(() => {

        const cart = JSON.parse(localStorage.getItem("cart"))

        if(cart){
             this.$store.commit("updateCart",cart)
        }

    })
  }