Why do I get "Maximum call stack size exceeded" error?

System Information
  • Strapi Version: 3.6.1
  • Operating System: Windows 10
  • Database: MySQL
  • Node Version: 14.16.1
  • NPM Version: 6.14.12

So I’ve been trying to implement my ERD using Strapi, and I just “hit a wall”:

I have a collection named “Stickey”, with a a repeatable component field named “Icon”.
within the “Icon” component, I have a field named “action type”, which includes a field named “popUp”, that should have an repeatable field of the “Icon” component (which I added manually in the code).

The thing is that when I add the repeatable Icon component to the attributes object of “PopUp”, I get this error message returned in my Content-Type Builder page:

Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at http://localhost:1337/admin/main.ee605eda.chunk.js:1:2342637
    at Array.reduce (<anonymous>)
    at e (http://localhost:1337/admin/main.ee605eda.chunk.js:1:2342609)
    at http://localhost:1337/admin/main.ee605eda.chunk.js:1:2342792
    at Array.reduce (<anonymous>)
    at e (http://localhost:1337/admin/main.ee605eda.chunk.js:1:2342609)
    at http://localhost:1337/admin/main.ee605eda.chunk.js:1:2342792
    at Array.reduce (<anonymous>)
    at e (http://localhost:1337/admin/main.ee605eda.chunk.js:1:2342609)
    at http://localhost:1337/admin/main.ee605eda.chunk.js:1:2342792

Here are my relevant *.settings.json files:

Stickey:
{

  "kind": "collectionType",

  "collectionName": "stickeys",

  "info": {

    "name": "Stickey",

  },

  "options": {

    "increments": true,

    "timestamps": true,

    "draftAndPublish": true

  },

  "pluginOptions": {

    "i18n": {

      "localized": true

    }

  },
  "attributes": {
    "title": {

      "type": "string",
      "required": true,
      "pluginOptions": {
        "i18n": {
          "localized": true
        }
      }
    },
    "backgroundColor": {

      "type": "string",

      "pluginOptions": {

        "i18n": {

          "localized": true
        }

      }

    },
    "icon": {

      "type": "component",

      "repeatable": true,

      "component": "icon.icon",

      "required": true,

      "pluginOptions": {

        "i18n": {

          "localized": true

        }

      }

    }

  }

}

Icon:
{

  "collectionName": "components_icon_icons",

  "info": {

    "name": "icon",

    "icon": "plus",

    "description": ""

  },

  "options": {},

  "attributes": {

    "title": {

      "type": "string",

      "required": true

    },

    "image": {

      "model": "file",

      "via": "related",

      "allowedTypes": [

        "images"

      ],

      "plugin": "upload",

      "required": true,

      "pluginOptions": {}

    },

    "action": {

      "type": "component",

      "repeatable": false,

      "component": "action-types.action"

    }

  }

}

popUp (within action-types.action):

{

  "collectionName": "components_action_types_pop_ups",

  "info": {

    "name": "popUp",

    "icon": "window-restore"

  },

  "options": {},

  "attributes": {

    "title": {

      "type": "string",

      "required": true

    },

    "icon": {

      "type": "component",

      "repeatable": true,

      "required": true,

      "component": "icon.icon"

    }

  }

}

Any ideas how to solve this?

This error is almost always means you have a problem with recursion in JavaScript code, as there isn’t any other way in JavaScript to consume lots of stack. Sometimes calling a recursive function over and over again, causes the browser to send you Maximum call stack size exceeded error message as the memory that can be allocated for your use is not unlimited. The solution is to wrap your recursive function call into a -

  • setTimeout
  • setImmediate or
  • process.nextTick

Also, you can localize the issue by setting a breakpoint on RangeError type of exception , and then adjust the code appropriately.