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
Cookies Boot File For Acess Cookies On SSR Mode
Call of Vuex whos making Access of cookie
-
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)
-
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 }
-
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>
-
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 ) }
-
btw I found this article:
https://dev.to/quasar/quasar-ssr-using-cookies-with-other-libs-services-4nkl
-
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-4nklI 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
-
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 } ]