Nuxt.js: RangeError: Maximum call stack size exceeded

Created on 25 Aug 2019 · 6Comments · Source: nuxt/nuxt.js

Version

Reproduction link

http://www.nourl.com

Steps to reproduce

From a page, when I make an Ajax request to an API resource / endpoint that returns a 404 / not found, I see "RangeError: Maximum call stack size exceeded".

In the below example, calling the API with a valid slug/parameter, like:

      let podcastDataResponse = await context.$axios.get('/podcast-episodes/' + podcastSlug);

I get a valid Json response back, and everything works fine.

However, if I pass an invalid slug to the API endpoint, such that the API returns a 404 (NOT Json), like:

      let podcastDataResponse = await context.$axios.get('/podcast-episodes/' + 'notfound');

Nuxt seems to crap out...and I see an error:

RangeError
Maximum call stack size exceeded

It looks like this bug might be related to something that was supposedly fixed before: https://github.com/nuxt/nuxt.js/issues/1354
However I am doing a simple Ajax request on my localhost, not load testing and hitting an API hundreds of times.

Feeling stuck on this - if anyone has any ideas, please help.

Here's the code:

  async asyncData (context) {
    try {
      let podcastSlug = context.params.slug;
      let podcastDataResponse = await context.$axios.get('/podcast-episodes/' + podcastSlug);
      console.log('podcastDataResponse', podcastDataResponse)
     // let podcastData = podcastDataResponse.data.data;
      return {
      }
    } catch (error) {
      console.error(error);
      context.error(error);
    }

  },

What is expected ?

We should not see "maximum call stack exceeded" ever.

What is actually happening?

Seeing "maximum call stack exceeded".

Full Error logs:

RangeError
Maximum call stack size exceeded
node_modules/@nuxt/devalue/dist/devalue.cjs.jsopen in editor
}
function escapeUnsafeChars(str) {
    return str.replace(unsafeChars, escapeUnsafeChar);
}
function safeKey(key) {
    return /^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(key) ? key : escapeUnsafeChars(JSON.stringify((key)));
}
function safeProp(key) {
    return /^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(key) ? "." + key : "[" + escapeUnsafeChars(JSON.stringify(key)) + "]";
}
function stringifyString(str) {

Js
safeKey@220:41
node_modules/@nuxt/devalue/dist/devalue.cjs.js:220:41
safeKey
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:77
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
REQUEST DETAILS
URI /podcast/saepe-omnis-reiciendis-adipisci-a-dolores-ut-odit2
REQUEST METHOD  GET
HTTP VERSION    1.1
CONNECTION  keep-alive
HEADERS
HOST    localhost:3000
CACHE-CONTROL   max-age=0
UPGRADE-INSECURE-REQUESTS   1
USER-AGENT  Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36
SEC-FETCH-MODE  navigate
SEC-FETCH-USER  ?1
ACCEPT  text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
SEC-FETCH-SITE  none
ACCEPT-ENCODING gzip, deflate, br
ACCEPT-LANGUAGE en-US,en;q=0.9,es-PE;q=0.8,es;q=0.7,nl;q=0.6,tr;q=0.5,la;q=0.4,zh;q=0.3,zh-HK;q=0.2,zh-CN;q=0.1,zh-TW;q=0.1
COOKIES
AUTH._REFRESH_TOKEN.LOCAL   false
AUTH._TOKEN.LOCAL   Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODAwMFwvYXBpXC9hdXRoXC9sb2dpblwvZ29vZ2xlXC9jYWxsYmFjayIsImlhdCI6MTU2NjM2MzE3MCwiZXhwIjoxNTY2MzY2NzcwLCJuYmYiOjE1NjYzNjMxNzAsImp0aSI6ImRkaUZJRGxSQVF6elAxSWUiLCJzdWIiOjIsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.RgyD6jzoMLN5_RmMPhdZD-1CjKwHK23otrENhYyuytM
AUTH._TOKEN.PASSWORD_GRANT  false
AUTH._REFRESH_TOKEN.PASSWORD_GRANT  false
AUTH.STRATEGY   local
REMEMBER_WEB_59BA36ADDC2B2F9401580F014C7F58EA4E30989D   eyJpdiI6Ikd4bHcwR2RZTzFrVzdVTVpTaWVBeEE9PSIsInZhbHVlIjoiMWhDSDc0TWNqY2VnU2FzS2VcL2FNUm9vb0lFSFVDdFFYSTNzekEwVmZFWEg2UThFVmRtaEV0alR0SHVVMXEydms1MDBwcW5iQTJSbWVCNVJtOStmb0xCTVZiZW1lT3hnWURGRVlRYXBrMmVyelZIRnpGa2I5emJlNFc0dndaRVViUDhhVlQxVlVUWDUrT1J6XC9QSmprejVTajFvWEk0d2ZKc1plRkFkcUxnODg9IiwibWFjIjoiYWZlNDczNzY2NWZhOTUzMzA3ZjQwYTg0MDFlMTFmNTliMmMyNDdhNWUwZWJmODA1ZmRjMjkzNGZlOGE5ZmRlOCJ9
I18N_REDIRECTED en
XSRF-TOKEN  eyJpdiI6Ijl6S29IXC8rQjlsTXNjbG10MWNHaUlRPT0iLCJ2YWx1ZSI6ImhJVzlQUHZtNWwrdFluZ0F0WE1tU0YrXC9JVVdReE9xc28yRWlcL09vQ1NNUHA5bitHTzNGbTNpK3NOY21hSnU0MCIsIm1hYyI6IjM0YmJhMTg2N2EzNDg1OWEzYTEwYjA4ZjQyOWU5MjQ3ZDUwYTk2ZGNjMTNhZjQ4ZWM2YWY4NDIxYjhkNDMzNGIifQ==
KEENBRAIN_SESSION   eyJpdiI6Im8rdVhYc3ZVT3VjYlZXYjkxUzdGOWc9PSIsInZhbHVlIjoiN1lBTkgwcVdGZFFvd1wvakc0WVVKTmJwK2d3enhEeW44VHF1WFg1N2lTME9WSWVuRTh2Sk5VVXVlczJvb2F1YUkiLCJtYWMiOiJhNGQ2ZmNlMTIxZmJiNTlmM2UwYzc5ZTNmYmE5YWI4MWM0NTk5ZTk1MmQ1ZmNjYWM3MThhNzZiOTU5MmFmMTJlIn0=

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

bug-report

Source

connecteev

Most helpful comment

@manniL Thanks. #4140 seems really old, any idea when that will be resolved? I'd like to at least get over this hump I'm facing now..

I am seeing this problem again today, this time without context.error()
The console shows:



 ERROR  Request failed with status code 401                                                                                                                                                       21:59:08

  at createError (node_modules/axios/lib/core/createError.js:16:15)
  at settle (node_modules/axios/lib/core/settle.js:17:12)
  at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:237:11)
  at IncomingMessage.emit (events.js:203:15)
  at IncomingMessage.EventEmitter.emit (domain.js:448:20)
  at endReadableNT (_stream_readable.js:1145:12)
  at process._tickCallback (internal/process/next_tick.js:63:19)


 WARN  Cannot stringify a function transformRequest                                                                                                                                               21:59:08


 WARN  Cannot stringify a function transformResponse                                                                                                                                              21:59:08


 WARN  Cannot stringify a function httpAdapter                                                                                                                                                    21:59:08


 WARN  Cannot stringify a function validateStatus                                                                                                                                                 21:59:08


 WARN  Cannot stringify arbitrary non-POJOs ClientRequest                                                                                                                                         21:59:08


 WARN  Cannot stringify a function                                                                                                                                                                21:59:08

And in the browser:

RangeError
Maximum call stack size exceeded
node_modules/@nuxt/devalue/dist/devalue.cjs.jsopen in editor
}
function escapeUnsafeChars(str) {
    return str.replace(unsafeChars, escapeUnsafeChar);
}
function safeKey(key) {
    return /^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(key) ? key : escapeUnsafeChars(JSON.stringify((key)));
}
function safeProp(key) {
    return /^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(key) ? "." + key : "[" + escapeUnsafeChars(JSON.stringify(key)) + "]";
}
function stringifyString(str) {

Js
safeKey@220:41
node_modules/@nuxt/devalue/dist/devalue.cjs.js:220:41
safeKey
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:77
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify

Sorry for my frustration but it just seems so random and cryptic....how can I get this resolved and start becoming productive again?

connecteev on 1 Sep 2019

👍3

All 6 comments

Apparently this is caused by context.error():

    } catch (error) {
      context.error(error);
    }

Is this the expected behavior? I remember reading somewhere that we should never see "RangeError: Maximum call stack size exceeded "

connecteev on 25 Aug 2019

Might be resolved via #4140

manniL on 26 Aug 2019

@manniL Thanks. #4140 seems really old, any idea when that will be resolved? I'd like to at least get over this hump I'm facing now..

I am seeing this problem again today, this time without context.error()
The console shows:



 ERROR  Request failed with status code 401                                                                                                                                                       21:59:08

  at createError (node_modules/axios/lib/core/createError.js:16:15)
  at settle (node_modules/axios/lib/core/settle.js:17:12)
  at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:237:11)
  at IncomingMessage.emit (events.js:203:15)
  at IncomingMessage.EventEmitter.emit (domain.js:448:20)
  at endReadableNT (_stream_readable.js:1145:12)
  at process._tickCallback (internal/process/next_tick.js:63:19)


 WARN  Cannot stringify a function transformRequest                                                                                                                                               21:59:08


 WARN  Cannot stringify a function transformResponse                                                                                                                                              21:59:08


 WARN  Cannot stringify a function httpAdapter                                                                                                                                                    21:59:08


 WARN  Cannot stringify a function validateStatus                                                                                                                                                 21:59:08


 WARN  Cannot stringify arbitrary non-POJOs ClientRequest                                                                                                                                         21:59:08


 WARN  Cannot stringify a function                                                                                                                                                                21:59:08

And in the browser:

RangeError
Maximum call stack size exceeded
node_modules/@nuxt/devalue/dist/devalue.cjs.jsopen in editor
}
function escapeUnsafeChars(str) {
    return str.replace(unsafeChars, escapeUnsafeChar);
}
function safeKey(key) {
    return /^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(key) ? key : escapeUnsafeChars(JSON.stringify((key)));
}
function safeProp(key) {
    return /^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(key) ? "." + key : "[" + escapeUnsafeChars(JSON.stringify(key)) + "]";
}
function stringifyString(str) {

Js
safeKey@220:41
node_modules/@nuxt/devalue/dist/devalue.cjs.js:220:41
safeKey
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:77
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49
stringify

Sorry for my frustration but it just seems so random and cryptic....how can I get this resolved and start becoming productive again?

connecteev on 1 Sep 2019

👍3

This is not a nuxt error per se.
You are passing the axios error object which can’t be serialized through devalue. Try to pass only the error message or sth. Custom to context.error.

manniL on 1 Sep 2019

👍1

@connecteev How did you resolve this ?

I am Getting the same error when trying to load a markdown file from filesystem. The error happen when running nuxt generate

 async asyncData({ params }) {

    console.log("asyncDataCalled")
    try {
      console.info(params.slug)
      let post = await import(`~/content/posts/${params.slug}.md`)
      console.log(post)
      return {
        post:post,
        tags:post.attributes.tags,
        title: post.attributes.title,
        date: post.attributes.date,
        singlePostComponent: post.vue.component,
      }
    } catch (err) {

      console.error(err)
      return false
    }
  }

The Error is

asyncDataCalled                                                               10:52:19
ℹ blah                                                                        10:52:19
[Object: null prototype] [Module] {                                           10:52:19
  default: {
    attributes: {
      title: 'Kollam Pwoli saanam',
      date: '21 March 2020',
      tags: [Array]
    },
    meta: {
      resourcePath: '/home/incrypto/dev/web/vue/my-blog/content/posts/blah.md'
    },
    vue: {
      component: [Object]
    }
  },
  attributes: [Getter],
  meta: [Getter],
  vue: [Getter]
}

 WARN  Cannot stringify POJOs with symbolic keys Symbol(Symbol.toStringTag)   10:52:19


 WARN  Cannot stringify a function data                                       10:52:19


 WARN  Cannot stringify a function render                                     10:52:19


 WARN  Cannot stringify a function created                                    10:52:19


 WARN  Cannot stringify a function a                                          10:52:19


 ERROR   /posts/blah                                                          10:52:19

RangeError: Maximum call stack size exceeded
    at String.replace (<anonymous>)
    at stringifyPrimitive (/home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:207:20)
    at stringify (/home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:92:20)
    at /home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
    at Array.map (<anonymous>)
    at stringify (/home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49)
    at /home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
    at Array.map (<anonymous>)
    at stringify (/home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49)
    at /home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
    at Array.map (<anonymous>)
    at stringify (/home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49)
    at /home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98
    at Array.map (<anonymous>)
    at stringify (/home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:49)
    at /home/incrypto/dev/web/vue/my-blog/node_modules/@nuxt/devalue/dist/devalue.cjs.js:129:98

✔ Generated /about                                                            10:52:19
✔ Generated /posts                                                            10:52:19
✔ Generated /

incrypt0 on 26 May 2020

👍1

I have the same problem.

request.onResponse(() => response.data.data)

I find when response.data.data is null, the error happen.

Jackliu007888 on 13 Nov 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

How can i add Jest to Nuxt.js?

msudgh · 3Comments

nuxt-link-active stays active

gary149 · 3Comments

Using Nuxt as a middleware : TypeError: Cannot read property 'renderer' of undefined

VincentLoy · 3Comments

Postcss autoprefixer

vadimsg · 3Comments

store initialization in plugin

uptownhr · 3Comments