Skip to content
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

Closed
byalexandrepedrosa opened this issue Jul 26, 2019 · 8 comments
Closed

error NuxtServerError: Cannot stringify a function #6132

byalexandrepedrosa opened this issue Jul 26, 2019 · 8 comments

Comments

@byalexandrepedrosa
Copy link

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

const i18n = require('./config/locales');

modules: [
['nuxt-i18n', i18n],
]

config/locales/index.js

module.exports = {
	locales: [
		{
			code: 'br',
			iso: 'pt-BR',
			name: 'Português Brasil',
			file: 'pt-BR.json'
		},
		{
			code: 'en',
			iso: 'en-US',
			name: 'English',
			file: 'en-US.json'
		}
	],
	defaultLocale: 'br',
	seo: true,
	lazy: true,
	detectBrowserLanguage: {
		cookieKey: 'redirected',
		useCookie: true
	},
	langDir: 'config/locales/',
	parsePages: false,
	pages: {},
	vueI18n: {
		fallbackLocale: 'en'
	}
};

config/locales/en-US.json

{
	"actions": "Actions",
	"yes": "Yes",
	"no": "No",
	"edit": "Edit",
	"password": "Password",
	"password_confirm": "Confirm Password",
	"login": "Log In",
	"forgot_password": "Forgot Password?",
	"remove": "Remove",
	"destroy_confirm_title": "Please Confirm",
	"destroy_confirm": "Are you sure you want to remove this?",
	"logout": "Log Out",
	"back": "Back",
	"save": "Save",
	"update": "Update",
	"forms": {
		"errors": {
			"required": "Please fill this out.",
				"standard": "A server error occurred."
		}
	},
	"cars": {
	"singular": "car",
		"plural": "cars",
		"new": "New Car",
		"edit": "Edit Car"
	}
}

config/locales/pt-BR.json

{
	"actions": "Ações",
	"yes": "Sim",
	"no": "Não",
	"edit": "Editar",
	"password": "Senha",
	"password_confirm": "Confirmar Senha",
	"login": "Logar",
	"forgot_password": "Esqueceu sua Senha?",
	"remove": "Remover",
	"destroy_confirm_title": "Por favor Confirme",
	"destroy_confirm": "Você têm certeza que quer remover?",
	"logout": "Log Out",
	"back": "Voltar",
	"save": "Salvar",
	"update": "Atualizar",
	"forms": {
		"errors": {
			"required": "Por favor preencha todos os campos.",
			"standard": "Um erro ocorreu no servidor."
		}
	},
	"cars": {
		"singular": "carro",
		"plural": "carross",
		"new": "Novo Carro",
		"edit": "Editar Carro"
	}
}

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
});

store/layout/getters.js

export default {
	useTopBar(state) {
		return state.topBar;
	}
};

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

This bug report is available on Nuxt community (#c9557)
@ghost ghost added the cmty:bug-report label Jul 26, 2019
@aldarund
Copy link

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.
Why do you have actions/getters and mutations inside your state?

@TheAlexLichter
Copy link
Member

TheAlexLichter commented Jul 27, 2019

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 export getters (same with the rest)

Could be related to lazy loading i18n languages as well IIRC 🤔

@byalexandrepedrosa
Copy link
Author

byalexandrepedrosa commented Jul 28, 2019

Would be possible get an example how to deal with store without functions?

~~Could be related to lazy loading i18n languages as well IIRC 🤔 ~~

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)

@TheAlexLichter
Copy link
Member

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 ☺️

@byalexandrepedrosa
Copy link
Author

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.

@TheAlexLichter
Copy link
Member

Apply the same for getters and actions.

@byalexandrepedrosa
Copy link
Author

byalexandrepedrosa commented Jul 28, 2019

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);
	},

@byalexandrepedrosa
Copy link
Author

byalexandrepedrosa commented Jul 29, 2019

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.:

Why do you have actions/getters and mutations inside your state?

Because I have learned do this way on vanilla Vue for modules spliting the code for easy maintenance in future
(one store per page / component and actions / mutations / getters splitted for fast search in specific file)
Sorry for does not answer before.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants