Vuex-persistedstate does not work properly in Gridsome project

[lambdadev007]

• vuex-persistedstate version: 4.0.0-beta.3
• node version: v12.18.4
• npm (or yarn) version: npm - 6.14.6, yarn - 1.22.5

Relevant code or config

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...},
  getters: {...},
  plugins: isClient ? [createPersistedState()] : []
});

What you did: it works fine on local machine, but not working on production when deployed to Netlify.

What happened: When I refresh a page that uses the persisted state, I get the below error.

Uncaught (in promise) DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

[robinvdvleuten]

I don't see how this is related to this plugin as you are mentioning an error related to HTML DOM nodes.

[jornwildenbeest]

Same here! vuex-persistedstate version: 4.0.0-beta.3 nodeversion 12.18.3 nuxt version 2.15.6

Error shows up in static mode after setting a cookie with vuex-persisedstate. When deleting the cookie, the error disappears.

Config:

import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie';
import cookie from 'cookie';

// access the store, http request and environment from the Nuxt context
// https://nuxtjs.org/api/context/
export default ({ store, req, isDev }) => {
    createPersistedState({
        key: 'authentication-cookie', // choose any name for your cookie
        fetchBeforeUse: true,
        paths: [
            // persist the access_token and refresh_token values from the "auth" store module
            'auth.accessToken',
            'auth.refreshToken',
            'auth.jwtExpiresAt',
            'auth.refreshTokenExpiresAt',
            'auth.test',
            'auth.loggedOut',
        ],
        storage: {
            getItem: (key) => {
                // See https://nuxtjs.org/guide/plugins/#using-process-flags
                if (process.server) {
                    if(req !== undefined) {
                        let headerCookie = req.headers.cookie;
                        if (typeof headerCookie !== 'string') {
                            headerCookie = '';
                        }
                        const parsedCookies = cookie.parse(headerCookie);
                        return parsedCookies[key];
                    }
                } else {
                    return Cookies.get(key);
                }
            },
            // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
            setItem: (key, value) =>
                Cookies.set(key, value, { expires: 365, secure: false }),
            removeItem: key => Cookies.remove(key)
        }
    })
    (store)
}

[robinvdvleuten]

This does not look like a bug with the plugin but with your application. Please ask for help on either StackOverflow or any Nuxt / Vue related forums.

[raind33]

i have met the same problem