-
-
Notifications
You must be signed in to change notification settings - Fork 5.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
error NuxtServerError: Cannot stringify a function #6132
Comments
You cannot have functions in your state. They cant be serialized. So the solution is not to have any functions or non pojo in your state. |
UPDATE: As @aldarund mentioned, you have a function (precisely all your actions, getters and mutations) in your state, which can't be serialized. You probably want to
|
Would be possible get an example how to deal with store without functions?
I agree, all errors of it looking on github and other nuxt projects come when using i18n too, seems without i18n this does not happen (have not tested) |
It is not related to i18n, but to export const state = () => ({
topBar: false,
topBarID: null,
navBar: false,
navBarId: null,
getters,
mutations,
actions
}); What you want is exporting state, getters, actions and mutations separately. See https://github.com/nuxt/nuxt.js/pull/4923/files as an example |
If I understand the example correctly, I have did: store/layout/index.js import actions from './actions';
// import mutations from './mutations';
import getters from './getters';
export const state = () => ({
topBar: false,
topBarID: null,
navBar: false,
navBarId: null,
getters,
// mutations,
actions
});
export const mutations = {
setTopBar(state, params) {
state.topBar = params;
}
}; But the error persist, occour less times this way. |
Apply the same for getters and actions. |
Theres nothing on getters and actions (have removed for test too), just have posted about them on begin to show the desired skeleton for development (at least the one for easy maintenance on future, but, can keep everything on one file if necessary too). The current error says about the setTopBar: Cannot stringify a function setTopBar Would be the way I set it? I am using on one page: async fetch ({ store, params }) {
await store.commit('layout/setTopBar', true);
},
beforeDestroy() {
this.$store.commit('layout/setTopBar', false);
}, |
Have tested again, this time with empty getters and actions on same file, and the error is gone, example: export const state = () => ({
topBar: false,
topBarID: null,
navBar: false,
navBarId: null
});
export const actions = {
};
export const mutations = {
setTopBar(state, params) {
state.topBar = params;
}
};
export const getters = {
}; I have no idea why works this way since actions and getters was empty, but, I will work using your solution. Thank for the help and patience. PS.:
Because I have learned do this way on vanilla Vue for modules spliting the code for easy maintenance in future |
Version
v2.8.1
Reproduction link
https://jsfiddle.net/
Steps to reproduce
This error is same of:
#4026
The link above says its fixed, but seems not...
My setup:
nuxt.config.js
config/locales/index.js
config/locales/en-US.json
config/locales/pt-BR.json
store/layout/index.js
store/layout/getters.js
What is expected ?
An update removing the flood of messages on server about:
Cannot stringify a function useTopBar
Or
An step by step how to fix it.
What is actually happening?
On every page load the server its flooded with a lot of messages:
Cannot stringify a function useTopBar
And many other values on vuex
Additional comments?
Seems there an fix on this link, but dindt get how to apply:
vuex-orm/vuex-orm#255
The text was updated successfully, but these errors were encountered: