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



  • 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
    vuexaction.png

    Cookies Boot File For Acess Cookies On SSR Mode
    bootfile.png

    Call of Vuex whos making Access of cookie
    callingvue.png



  • @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
      }
    ]
    


  • @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)



  • @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.



  • @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
    }
    
    


  • @matheus-pimentel

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



  • @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>
    
    


  • @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

    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



  • @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
      }
     
    ]
    

Log in to reply