CODEWITHSUNDEEP
nuxt.js
defiant
defiant

Reputation: 3341

Nuxt: All pages show a warning "Cannot stringify a function Object", how do I find out where it is coming from?

I have a fairly large project everything works without any issues except for a warning. The warning shows "Cannot stringify a function Object" without any fnction name. So I am unable to figure out where it is coming from or what is causing it.

I tried commenting out all the middlewares I have, plugins I have and even created a new page with base minimum skeleton code and yet this warning appears when I access it.

What I am looking for is a way to find out the place or code where the warning is coming from?

Sorry, I can't share my code. Its the whole project and I am not able to recreate the warning as well. So is it possible to figure it out?

Upvotes: 10

Views: 18762

Answers (3)

Mostafa Rahmati
Mostafa Rahmati

Reputation: 302

I don't know if this will help anyone, but the issue in my case was, my state Object was not normalized.

export const state = () => ({
teacher: Object, // This was causing the warning
price: "",
})

From MDN. This is for JSON.stringify.

undefined, Functions, and Symbols are not valid JSON values. If any such values are encountered during conversion they are either omitted (when found in an object) or changed to null (when found in an array). JSON.stringify() can return undefined when passing in "pure" values like JSON.stringify(function() {}) or JSON.stringify(undefined).

@nuxt/devalue can handle the values below unlike JSON.stringify, But apparently still unable to handle functions or classes which in my case was the problem.

Read more about @nuxt/devalue

cyclical references (obj.self = obj)
repeated references ([value, value])
undefined, Infinity, NaN, -0
regular expressions
dates
Map and Set

Just remove any function or type classes like Object or String and you should be good to go.

Hope this helped you.

Upvotes: 5

Raush
Raush

Reputation: 151

To clarify, Nuxt serializes state from server to client i.e. it passes state from asyncData, data, vuex store state from server to client. The package that throws this error is @nuxt/devalue used by Nuxt.

To resolve, make sure that state is plain object.

Upvotes: 6

Aldarund
Aldarund

Reputation: 17621

That warning comes from @nuxt/devalue library, that is used by Nuxt to serialize state from server to client. E.g. its used to pass state from asyncData, data, vuex store state from server to client, so you need to check it.

Upvotes: 5

Related Questions