Store not hydrated from cookies when used with @nuxtjs/i18n and routeRules

[rudolfbyker]

Describe the bug

In some very specific circumstances, stores are not hydrated from the cookies.

This is a very esoteric issue. It took me many many hours to finally get a minimal reproduction, and even then I don't understand completely what is happening. See the stackblitz link below for the code. Here is a screen capture video where I walk through the problem: https://github.com/prazdevs/pinia-plugin-persistedstate/assets/10025342/c6651243-f3fc-40a9-aafd-1762d6a8453c

In the reproduction, if you do any one of the following, the problem disappears, and the store is properly hydrated:

• Visit /en instead of /en/comment/1.
• Uninstall i18n from the project.
• Remove the routeRules for /*/comment/**

I tried to debug this by stepping through the generated code in .output/server/. Much of the code there I don't fully understand (being a user of Nuxt3 rather than a core developer), but here is what I could gather:

In .output/server/node_modules/pinia-plugin-persistedstate/dist/index.mjs we have:

function hydrateStore(store, { storage, serializer, key, debug }) {
  try {
    const fromStorage = storage == null ? void 0 : storage.getItem(key);
    if (fromStorage)
      store.$patch(serializer == null ? void 0 : serializer.deserialize(fromStorage));
  } catch (e) {
    if (debug)
      console.error("[pinia-plugin-persistedstate]", e);
  }
}

storage.getItem() is a call to the getItem method in usePersistedstateCookies() which is seen in .output/server/chunks/build/server.mjs:

function usePersistedstateCookies(cookieOptions) {
  return {
    getItem: (key) => {
      return useCookie(key, {
        ...cookieOptions,
        encode: encodeURIComponent,
        decode: decodeURIComponent
      }).value;
    },
    setItem: (key, value) => {
      useCookie(key, {
        ...cookieOptions,
        encode: encodeURIComponent,
        decode: decodeURIComponent
      }).value = value;
    }
  };
}

Stepping into useCookie(), we find:

function useCookie(name, _opts) {
  var _a;
  const opts = { ...CookieDefaults, ..._opts };
  const cookies = readRawCookies(opts) || {};
  // ...
  return cookie;
}

Stepping into readRawCookies(), we find:

function readRawCookies(opts = {}) {
  {
    return parse$1(getRequestHeader(useRequestEvent(), "cookie") || "", opts);
  }
}

At this point, I put in some console.log statements to see what is going on:

function readRawCookies(opts = {}) {
  {
    const event = useRequestEvent();
    console.log({
      headers: event.node.req.headers,
      rawHeaders: event.node.req.rawHeaders,
    });
    const header = getRequestHeader(event, "cookie");
    console.log(header);
    const result = parse$1(header || "", opts);
    console.log(result);
    return result;
  }
}

If we do this, then we see the following:

• When the store is hydrated properly, our cookie exists both in req.headers and in req.rawHeaders.
• When the store is not hydrated properly, our cookie exists only in req.rawHeaders, while req.headers is completely empty. This is where I gave up.

Reproduction

https://stackblitz.com/edit/github-5b43sb-okx9lc

System Info

Stackblitz

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible of the bug.