argument str must be a string on nuxt server persist

[ilyapisany]

• vuex-persistedstate version: ^4.0.0-beta.3
• node version: v10.19.0
• npm (or yarn) version: npm v16.14.4

What you did: Install package and use default plugin from readme (nuxt cookie server persist)

What happened: If no cookie set (example on first page loading).

if (process.server) {
     const parsedCookies = cookie.parse(req.headers.cookie);
     return parsedCookies[key];
}

throws type error argument str must be a string

Reproduction sandbox:

Problem description: cookie package receive string as first parameter but undefined given on empty cookie in browser

Suggested solution: Check is request.headers.cookie is string and set it to blank if not

[VconexID]

i have this issue as well in new version, currently i use vuex-persistedstate 3.1.0 and it works perfectly.

[ilyapisany]

I fixed this issue by checking is request.headers.cookie is string like this

let headerCookie = req.headers.cookie;
if (typeof headerCookie !== 'string') {
  headerCookie = '';
}
const parsedCookies = cookie.parse(headerCookie);
return parsedCookies[key];

[robinvdvleuten]

This seem to be more like a Nuxt issue on how it handles incoming cookies.

[ilyapisany]

I this it's problem of cookie package and it ca be resolved by fix readme plugin template (changes in related mr)

[dosstx]

@ilyapisany I still seem to get the argument str must be a string error.

I have added to Nuxt like so:

/plugins/persistedState.js:

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

export default ({ store, req }) => {
  createPersistedState({
    storage: {
      getItem: (key) => {
        // See https://nuxtjs.org/guide/plugins/#using-process-flags
        if (process.server) {
          let cookieHeader = cookie.parse(req.headers.cookie)
          if (typeof cookieHeader !== 'string') {
            cookieHeader = ''
          }
          const parsedCookies = cookie.parse(cookieHeader)
          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)
}

And plugins:

plugins: [
    { src: '~/plugins/persistedState.js' }
]

Any ideas?

[alfredomtzrmz]

same here.. has anyone can fixed it?

[Jimmar]

a one liner alternative that worked for me was

const parsedCookies = cookie.parse(req.headers.cookie ?? "");
return parsedCookies[key];

or the full the plugin

// plugins/persistedState.js

import createPersistedState from "vuex-persistedstate";
import Cookies from "js-cookie";
import cookie from "cookie";

export default ({ store, req }) => {
  createPersistedState({
    paths: [...],
    storage: {
      getItem: key => {
        if (process.server) {
          const parsedCookies = cookie.parse(req.headers.cookie ?? "");
          return parsedCookies[key];
        } else {
          return Cookies.get(key);
        }
      },
      setItem: (key, value) => Cookies.set(key, value, { expires: 1, secure: false }),
      removeItem: key => Cookies.remove(key)
    }
  })(store);
};