Nuxt generate and vuex store issuees about cookie-universal

[FistMeNaruto]

Huge thanks, it works perfectly now!

[microcipcip]

The error is here but I am not sure how to fix it because I've never used nuxt generate, basically what I think is happening is that cookie-universal is unable to determine the right environment so it is disabled.

[microcipcip]

For debugging purpose you could go to node_modules in the cookie-universal folder and change this:

  let isClient = typeof document === 'object' && typeof document.cookie === 'string'
  let isServer = (
    typeof req === 'object' &&
    typeof res === 'object' &&
    typeof module !== 'undefined'
  )
  let isNeither = (
    (!isClient && !isServer) ||
    (isClient && isServer)
)

To this:

let isClient = true
let isServer = false
let isNeither = false

And see if that fixes it. I don't know what the compiled nuxt generate code is, but I suspect that isNeither returns true.

[FistMeNaruto]

Thanks for the quick reply! I think nuxt generate is one of the nicest things about nuxt, it allows me to use static netlify hosting, that's why I'm trying to use it.

I have found minified cookie-universal code in node_modules. Based on your description I assumed these are the same variables in the minified code:

a = "object" === ("undefined" == typeof document ? "undefined" : o(document)) &&
       "string" == typeof document.cookie,
s = "object" === (void 0 === t ? "undefined" : o(t)) &&
      "object" === (void 0 === r ? "undefined" : o(r)) &&
      void 0 !== e,
u = (!a && !s) || (a && s),

so I replaced them with this in both cookie-universal.js and cookie-universal-common.js

a = true,
s = false,
u = false,

After this change, running nuxt generate throws document is not defined error:

  ReferenceError: document is not defined
  
  - cookie-universal-common.js:75 f
    [project-name]/[cookie-universal]/dist/cookie-universal-common.js:75:18
  
  - cookie-universal-common.js:146 Object.get
    [project-name]/[cookie-universal]/dist/cookie-universal-common.js:146:29
  
  - server-bundle.js:3636 Store.nuxtServerInit
    server-bundle.js:3636:45
  
  - vuex.common.js:706 Array.wrappedActionHandler
    [project-name]/[vuex]/dist/vuex.common.js:706:23
  
  - vuex.common.js:428 Store.dispatch
    [project-name]/[vuex]/dist/vuex.common.js:428:15
  
  - vuex.common.js:334 Store.boundDispatch [as dispatch]
    [project-name]/[vuex]/dist/vuex.common.js:334:21
  
  - server-bundle.js:1327 module.exports.__webpack_exports__.default
    server-bundle.js:1327:19

[microcipcip]

@FistMeNaruto Yeah of course...with the generate command that breaks because it cannot find the environment. I'll have to contact Nuxt team and ask them how I can detect the nuxt generate as it seems that is neither a node env or a browser env, I'll let you know if I am able to find a solution.

[FistMeNaruto]

Thanks! I think there is context.isStatic https://nuxtjs.org/api/context but I'm not sure how to access it from cookie-universal

[microcipcip]

@FistMeNaruto Thanks a lot, that may help me! I am very busy these days but I definitely want to sort this out. Do you happen to have a very basic github repo where I can reproduce this issue? If not, I'll need more time to sort this out but I will find a way to fix it. Thanks for your feedback :)

[FistMeNaruto]

I do have a repo like that: https://github.com/FistMeNaruto/nuxt-shopify-example

If you run that project in dev mode, you will see that a cookie named shopCheckoutID is saved and if you add items to your cart, they will remain there even after refreshing the page.

If you run yarn generate and serve the dist folder on a web server (https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en to easily run one locally), the cookie is not saved, no errors are logged and cart is wiped after a refresh

Thanks for help!

[microcipcip]

@FistMeNaruto awesome, I'll have a look this weekend and sort this out.

[FistMeNaruto]

Thanks! I have also noticed this in Nuxt documentation: https://nuxtjs.org/guide/commands#static-generated-deployment-pre-rendered-

When generating your web application with nuxt generate, the context given to data() and fetch() will not have req and res.

Could this cause the issue?

EDIT: I think it might be my fault doing everything in nuxtServerInit, I will have to test other options.

[microcipcip]

@FistMeNaruto Indeed the req and res are probably null and the document.cookie is undefined so the cookie plugin goes nuts and doesn't know what to do, that's exactly the issue.

Edit: this is related, it may be useful to avoid running code during generate if it is not client: nuxt/nuxt#240 (comment)

[microcipcip]

Sorry for the delay! There is after all nothing wrong with the cookie-universal plugin.

The reason that it doesn't work is that nuxtServerInit only runs during yarn generate and (as you guessed) it will basically try to set the cookie to the node env. Being node env just a generator command and not a proper server, it will never send the cookie to any browser.

See below a working solution. I have basically renamed nuxtServerInit to shopMe and changed all app in the action with this and initialized the action in the mounted hook.

• store/index.js

    actions: {
      async shopMe({ commit }) {
        const shopCheckoutID = this.$cookies.get("shopCheckoutID");
        let checkout = {};
        if (shopCheckoutID) {
          checkout = await this.$shopifyClient.checkout.fetch(shopCheckoutID);
          if (checkout.completedAt) {
            checkout = await this.$shopifyClient.checkout.create();
          }
        } else {
          checkout = await this.$shopifyClient.checkout.create();
        }

        let shop = {
          checkout: await checkout,
          products: await this.$shopifyClient.product.fetchAll(),
          shop: await this.$shopifyClient.shop.fetchInfo()
        };

        await this.$cookies.set("shopCheckoutID", shop.checkout.id);

        commit("initShop", shop);
      }
    }

• layouts/default.vue

export default {
  components: {
    Cart
  },
  mounted() {
    this.$store.dispatch(`shopMe`);
  }
};