vuex-orm: WARN: Cannot stringify arbitrary non-POJOs

Maybe this can help someone:

I solved the problem converting the class object to a POJO’s at toJSON() function (which is the function devalue library calls). So an example would be:

class User {
  toJSON () {
    return { ...this } // here I make a POJO's copy of the class instance
  }
}

It’s a clear solution which also makes sense to solve the warning.

Yeah. I think it’s going to solve this unless we make internal change to the Vuex ORM.

Basically, Nuxt is hydrating the store state, and sending it to the client as a string. Then, at the client side, it uses that hydrated store. So, the state gets serialized before the store state is getting send to the client. Therefor, it throws that warning that it is failing to serialize the store state, because it stores class instances (models).

I think, generally speaking, Vue, Vuex and Nuxt don’t want to developer to store anything but serializable object to the store state – which is I think no Functions.

To avoid this, Vuex ORM must store pure object to the store (not class instance), and then re instantiate each records when we fetch through getters. This was what it was few month ago with Vuex ORM. I’ve changed it to get a bit more performance boost, and also to implement index mapping.

Maybe we should go back to old days…? Or maybe we could wait until Vuex 3 comes out (and hopefully Vuex 4), to see what is the right way to go. I guess we need more discussion on this topic.

Working with Nuxt content module, had this issue.

I too am getting this with the latest few versions of Nuxt

It seems like the problem in the devalue lib is that it’s checking for a toJSON method.

I was able to completely get rid of the warnings by making a plugin to modify the Model.

const plugin = {
  install(components) {

    components.Model.prototype.toJSON = function () {
      return this.$toJson()
    }

  }
}

Would it make sense to make this toJSON method included in vuex-orm instead of a plugin?

Actually, I’m new to vue ecosystem, so I cannot advice, but it would be good idea to share this and ask for help in nuxt community.

Getting this error today with "vuex": "^3.6.0" and "@vuex-orm/core": "^0.36.3",

@kiaking @willhoyle Has this regressed? Missing the toJSON on the model and getting the error. Seems the current version is lacking this change.

I am getting this error too

I tried the above suggestions but it didn’t help. After adding into nuxt config file, resolved issue:

experimental: {
    renderJsonPayloads: false,
  },

There is some info about cause of this here but no solution.

It seems it is related to a package called devalue, but I don’t know what it is.

Done! This is fixed at Vuex ORM 0.31.3 🎉 https://github.com/vuex-orm/vuex-orm/releases/tag/v0.31.3

Again, thank you @ozum and @willhoyle for finding the solution for this! 👍

@willhoyle Got ya! I’ll create PR for this and make a release soon. Thank you so so so much for finding out the solution for this! ❤️

@willhoyle AHHHH NIIIICE! Very cool! This is the Nuxt forked version of devalue hah. Sorry I was looking at original devalue package.

I think adding toJSON method to the model is good! One concern is that maybe the Nuxt will change this behavior in the future but even if they did, toJSON method will do nothing for Vuex ORM users anyway.

Wonderful! Thank you so much @willhoyle for finding this! Would you like to make PR for this? Or I would just make one.

Oh wait what!? Really? If this is going to fix the problem, I think it definitely should go in to the Core.

But I couldn’t find a source where devalue is checking toJSON method. Could you guide me to the code? I just want make sure if this will not break anything 🤔