Nuxt.js: error NuxtServerError: Cannot stringify a function

[benfavre]

Version

v2.1.0

Reproduction link

https://jsfiddle.net/

Steps to reproduce

Use lazy translations

What is expected ?

For it to render the page

What is actually happening?

Error message

Additional comments?

✖ error NuxtServerError: Cannot stringify a function
at walk (xxx/node_modules/devalue/dist/devalue.umd.js:16:19)
at xxx/node_modules/devalue/dist/devalue.umd.js:49:72
at Array.forEach ()
at walk (xxx/node_modules/devalue/dist/devalue.umd.js:49:40)
at xxx/node_modules/devalue/dist/devalue.umd.js:49:72
at Array.forEach ()
at walk (xxx/node_modules/devalue/dist/devalue.umd.js:49:40)
at xxx/node_modules/devalue/dist/devalue.umd.js:49:72
at Array.forEach ()
at walk (xxx/node_modules/devalue/dist/devalue.umd.js:49:40)
at devalue (xxx/node_modules/devalue/dist/devalue.umd.js:53:5)
at Renderer.renderRoute (xxx/node_modules/nuxt/dist/nuxt.js:2042:50)
at process._tickCallback (internal/process/next_tick.js:68:7)

_{This bug report is available on Nuxt community (#c7882)}

[manniL]

Please add an actual reproduction repository or CodeSandBox (https://codesandbox.io/s/github/nuxt/codesandbox-nuxt/tree/master/?autoresize=1&hidenavigation=1&view=preview). It’s not hard and will decrease the bug fixing effort for us a lot!

[RDMStreet]

Same problem!

[aldarund]

@LordGuard Please add an actual reproduction repository or CodeSandBox

[benfavre]

Any nuxt project with the i18n nuxt package and async translations will do it.

[petyunchik]

The problem is in devalue package usage
There are more details in the comments for this commit: https://github.com/nuxt/nuxt.js/commit/df148a896e96228f8b6c8d3cebf25380cd4faab8

If devalue encounters a function or a non-POJO, it will throw an error.

by devalue readme

[benfavre]

3913

Thanks sherlock ;)

[manniL]

We are working on it 👍

[davision]

I'm getting this error with:

 NuxtServerError: Cannot stringify POJOs with symbolic keys
  at walk (project/node_modules/devalue/dist/devalue.umd.js:47:31)
  at project/node_modules/devalue/dist/devalue.umd.js:49:72
  at Array.forEach (<anonymous>)
  at walk (project/node_modules/devalue/dist/devalue.umd.js:49:40)
  at Array.forEach (<anonymous>)
  at walk (project/node_modules/devalue/dist/devalue.umd.js:33:27)
  at project/node_modules/devalue/dist/devalue.umd.js:49:72
  at Array.forEach (<anonymous>)
  at walk (project/node_modules/devalue/dist/devalue.umd.js:49:40)
  at devalue (project/node_modules/devalue/dist/devalue.umd.js:53:5)
  at Renderer.renderRoute (project/node_modules/nuxt/dist/nuxt.js:2042:50)
  at <anonymous>

This occures when I'm using:

  async asyncData({params}) {
    const fileContent = await import(`~/static/news/${params.slug}.md`)

    return {
      content: fileContent,
    }
  },

[bavicj]

I had this problem when I had vee-validation custom validator messages in i18n files. For example:
_default: field => `Field '${field}' is not correct`,
After moving this to separate files and not saving it to vuex, everything works fine (I am also using lazy i18n)

[begueradj]

I am facing the same issue in a Nuxt project using nuxt-i18n and asynchronous requests. What is the solution to this problem?

[bavicj]

@begueradj check if any key in your translation files contains function

[begueradj]

@bavicj that is my case, could you please share the solution in this case?

[bavicj]

@begueradj as I said previously, I removed those messages to separate files and use those files while setting up vee-validation plugin. But that was in my use case, dont know why you have functions in translation files. Isn't using i18n params enough for you?
$t('my.message.key', { arg1: 'this is arg1'})

[begueradj]

Thank you. My translation files are .js files in which I load the translated data asynchronously from a translation API that returns JSON files.

[benfavre]

Right now the solution is to modify "devalue" package and comment out the error. Future version of nuxt will have a fork of devalue.

[samtgarson]

I'm also getting Cannot stringify arbitrary non-POJOs when trying to serialize Sequelize records which serialized to JSON fine previously. I'll try and work up a codesandbox.

In the meantime, seems like #3913 was maybe put in a bit prematurely? Modifying a dependency isn't an appropriate fix for production apps, should that change to use devalue be reverted until there's a fix?

[benfavre]

This is not the first time Nuxt has been in an unsuable state because of code pushed to the main branch. Right now I'd rather they get stuff done and push forward with merging a devalue fork rather than having people working on reverting improvement for bux fixes for transient issues. Ofc just my opinion.

[samtgarson]

@benfavre I would normally agree, but now that users of Nuxt are on v2 in production, and v2.0.0 -> v2.1.0 is not a breaking change, this could easily go out to production apps.

I love using Nuxt but I worry that people will stop taking it seriously if bugs are released and not hotfixed immediately. IMHO a hotfix should be the first priority.

[davision]

Well, it is quite of a breaking change with this bug.

[samtgarson]

Well, it is quite of a breaking change with this bug.

Exactly—2.1.0 (aka a MINOR version increment) means no breaking changes, so this bug needs to be fixed.

If this is an intentional breaking change, it needs to go into v3 (I don't get the impression from the release that it was intentional). Otherwise a hotfix should to be released.

[benfavre]

It is fixed they just need to merge it, no need to revert.

[imns]

I agree with @samtgarson.

2.1.0 (aka a MINOR version increment) means no breaking changes

[manniL]

Sorry for the late fix! The PR is merged and the release will come in soon as well.
Thanks for your patience folks :pray:

[manniL]

Latest nuxt-edge has the changes already if you want to try and give early feedback!

All other duplicated issues: https://github.com/nuxt/nuxt.js/issues/4025, https://github.com/nuxt/nuxt.js/issues/4053, https://github.com/nuxt/nuxt.js/issues/4059, https://github.com/nuxt/nuxt.js/issues/4105

[cmty[bot]]

This bug-report has been fixed by @aldarund.

[Lahori-Jawan]

what I did is JSON.stringify the Sequelize result from api and then JSON.parse back. problem solved 😎

[manniL]

@Lahori-Jawan The latest sequelize should support toJSON as well so it should've worked (except there are nested classes that don't have the method) :thinking:

[davision]

I am still getting the same error here. Am I missing something? Updated to Nuxt v2.2 and removed node_modules prior to installing.

✖ error NuxtServerError: Cannot stringify POJOs with symbolic keys
  at walk (/node_modules/devalue/dist/devalue.umd.js:47:31)
  at /node_modules/devalue/dist/devalue.umd.js:49:72
  at Array.forEach (<anonymous>)
  at walk (/node_modules/devalue/dist/devalue.umd.js:49:40)
  at Array.forEach (<anonymous>)
  at walk (/node_modules/devalue/dist/devalue.umd.js:33:27)
  at /node_modules/devalue/dist/devalue.umd.js:49:72
  at Array.forEach (<anonymous>)
  at walk (/node_modules/devalue/dist/devalue.umd.js:49:40)
  at devalue (/node_modules/devalue/dist/devalue.umd.js:53:5)
  at Renderer.renderRoute (/node_modules/nuxt/dist/nuxt.js:2042:50)
  at <anonymous>

[manniL]

@davision I think that's related to https://github.com/nuxt-community/devalue/pull/3#pullrequestreview-164649282

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.