No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    3
    12
    645
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • M
      matheus.pimentel last edited by

      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

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @matheus.pimentel last edited by

        @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
          }
        ]
        
        M 1 Reply Last reply Reply Quote 0
        • M
          matheus.pimentel @dobbel last edited by

          @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 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @matheus.pimentel last edited by 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.

            M 1 Reply Last reply Reply Quote 0
            • M
              matheus.pimentel @dobbel last edited by 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 W 2 Replies Last reply Reply Quote 0
              • dobbel
                dobbel @matheus.pimentel last edited by

                @matheus-pimentel

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

                M 1 Reply Last reply Reply Quote 0
                • M
                  matheus.pimentel @dobbel last edited by

                  @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 2 Replies Last reply Reply Quote 0
                  • dobbel
                    dobbel @matheus.pimentel last edited by

                    @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 )
                    }
                    
                    
                    M 1 Reply Last reply Reply Quote 1
                    • dobbel
                      dobbel @matheus.pimentel last edited by

                      @matheus-pimentel

                      btw I found this article:

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

                      1 Reply Last reply Reply Quote 1
                      • M
                        matheus.pimentel @dobbel last edited by

                        @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 1 Reply Last reply Reply Quote 0
                        • dobbel
                          dobbel @matheus.pimentel last edited by

                          @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
                            }
                           
                          ]
                          
                          1 Reply Last reply Reply Quote 0
                          • W
                            wyeinseo @matheus.pimentel last edited by

                            @matheus-pimentel I am also getting same error.
                            Have you got any solution.

                            1 Reply Last reply Reply Quote 0
                            • First post
                              Last post