Vuex + Cookies in SSR + SPA ...default.get is not a function

matheus.pimentel

I been having a problem with a instance of a cookies boot file for a SSR application, I follow the steps on documetation of quasar but i having missing something and do not working in boot file SOMEBODY HELP:
Action File From Vuex

Cookies Boot File For Acess Cookies On SSR Mode

Call of Vuex whos making Access of cookie

dobbel

@matheus-pimentel

the problem is you are using cookies/localstorage ( client side only entities) in Quasar SRR mode.

Here’s a part from https://quasar.dev/quasar-cli/boot-files#Usage-of-boot-files

“When building a SSR app, you may want some boot files to run only on the server or only on the client, in which case you can do so like below:”

boot: [
  {
    server: false, // run on client-side only!
    path: '<name>' // references /src/boot/<name>.js
  },
  {
    client: false, // run on server-side only!
    path: '<name>' // references /src/boot/<name>.js
  }
]

matheus.pimentel

@dobbel said in Vuex + Cookies in SSR + SPA ...default.get is not a function:

{
server: false, // run on client-side only!
path: ‘<name>’ // references /src/boot/<name>.js
},

So… I have to making my boot file to server side only (Sorry my english, I’m Brazillian)

dobbel

@matheus-pimentel

So… I have to making my boot file to server side only (Sorry my english, I’m Brazillian)

when you use cookies or localstorage in a boot file you should only use it client side.

But that is correct code block where you should add your bootfile.

matheus.pimentel

@dobbel I got this erro when I trying using the boot on Vuex Action File

TypeError: boot_cookies__WEBPACK_IMPORTED_MODULE_1__.cookies.get is not a function
    at Store.revisarUsuarioLogado (server-bundle.js:1579:70)
    at Array.wrappedActionHandler (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vuex/dist/vuex.common.js:849:23)
    at Store.dispatch (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vuex/dist/vuex.common.js:514:15)
    at Store.boundDispatch [as dispatch] (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vuex/dist/vuex.common.js:404:21)
    at VueComponent.beforeCreate (js/0.js:112:25)
    at invokeWithErrorHandling (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue/dist/vue.runtime.common.dev.js:1850:57)
    at callHook (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue/dist/vue.runtime.common.dev.js:4207:7)
    at VueComponent.Vue._init (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue/dist/vue.runtime.common.dev.js:4985:5)
    at new VueComponent (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue/dist/vue.runtime.common.dev.js:5134:12)
    at createComponentInstanceForVnode (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8184:10)
    at renderComponentInner (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8408:40)
    at renderComponent (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8383:5)
    at RenderContext.renderNode (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8294:5)
    at RenderContext.next (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:2598:23)
    at cachedWrite (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:2451:9)
    at renderElement (/home/sensorial/Documentos/Matheus/QuasarTrainer/node_modules/vue-server-renderer/build.dev.js:8544:5)

Action.js Vuex file

import {cookies} from 'boot/cookies'

export async function revisarUsuarioLogado ({commit}, ssrContext) {
  try {
  console.log(cookies.get('temvagas_usr'))
  //await commit('salvarUsuarioLogado',  value )
  } catch (error) {
    console.log(error)
  }
  
} 

export function salvarUsuarioLogado ({commit}, payload) {
  commit('salvarUsuarioLogado',  payload )
}

cookies.js Boot File

// import something here
import { Cookies } from 'quasar'
// "async" is optional;
// more info on params: https://quasar.dev/quasar-cli/boot-files
export default async  (ssrContext) {
  // something to do
  const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies // otherwise we're on client


  // "cookies" is equivalent to the global import as in non-SSR builds
}

dobbel

@matheus-pimentel

from where in your code are you dispatching the revisarUsuarioLogado action?

matheus.pimentel

@dobbel First thank you very much for your attention.
I have called in the first layout for login and in the layout after authentication the error happens on both:

<script>
export default {
    name: 'MainLayout',
    components: {
        'login-navbar': require('components/Login/loginNavbar.vue').default
    },
    async beforeCreate() {
        await this.$store.dispatch("user/revisarUsuarioLogado")

    },
    data() {
        return {
            modalOn: false,
        }
    },
}
</script>


<script>
export default {
    components: {
        'sidebar': require('components/Autenticado/sideBar.vue').default,
        'autenticado-navbar': require('components/Autenticado/autenticadoNavbar').default
    },
    data() {
        return {}
    },
    async beforeCreate() {
        try {
            await this.$store.dispatch("user/revisarUsuarioLogado")
        } catch (error) {
            console.log(error)
        }
        
    }
}
</script>

dobbel

@matheus-pimentel

I am not sure you can do this( I have not seen it anywhere , that’s why):

import {cookies} from 'boot/cookies'

But what about this:



export async function revisarUsuarioLogado ({commit}, ssrContext) {
  try {
    const cookies = process.env.SERVER
    ? Cookies.parseSSR(ssrContext)
    : Cookies

    console.log(cookies.get('temvagas_usr'))
   //await commit('salvarUsuarioLogado',  value )
  } catch (error) {
    console.log(error)
  }  
} 

export function salvarUsuarioLogado ({commit}, payload) {
  commit('salvarUsuarioLogado',  payload )
}

dobbel

@matheus-pimentel

btw I found this article:

https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl

matheus.pimentel

@dobbel

I’m been trying change the import mode to a function or a const works but not i’m expected, stay saying that cookies.get() is not a function

~~@matheus-pimentel I am not sure you can do this( I have not seen it anywhere , that’s why):~~

import {cookies} from 'boot/cookies'

btw I found this article:
https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl

I seen this on my search on internet, the documentation appears soo much easy to do this, I gonna try anyway is better doing this that be stack in work

dobbel

@matheus-pimentel

That boot file for your cookies. Did you exclude it to run on the client only in q.conf file? If so try to remove the exclusion.

boot: [
  {
    server: false, // run on client-side only!
    path: '<name>' // references /src/boot/<name>.js
  }
 
]