Maximum call stack size exceeded when saving user in ecommerce template

gregwhitworth

2 months ago

17

• 

  denolfe

  Payload Team

  2 months ago

  Not too much info to troubleshoot. Any stack trace available?

• 

  Martin R

  2 months ago

  Maximum call stack size exceeded is thrown when a function call is made that exceeds the call stack size. This can occur due to the following reasons: Too many function calls. Issues in handling recursion, e.g. missing base case in a recursive function to stop calling itself infinitely

• 

  gregwhitworth

  2 months ago

  This is when I'm using the commerce template and I'm clicking save for a new user, here is the full stack:

  
  
  [03:44:44] ERROR (payload): RangeError: Maximum call stack size exceeded at Object.isMergeableObject (C:\Users\gregw\git\user-settings\node_modules\deepmerge\dist\cjs.js:5:7) at mergeObject (C:\Users\gregw\git\user-settings\node_modules\deepmerge\dist\cjs.js:81:14) at deepmerge (C:\Users\gregw\git\user-settings\node_modules\deepmerge\dist\cjs.js:117:10) at cloneUnlessOtherwiseSpecified (C:\Users\gregw\git\user-settings\node_modules\deepmerge\dist\cjs.js:34:5) at C:\Users\gregw\git\user-settings\node_modules\deepmerge\dist\cjs.js:94:23 at Array.forEach (<anonymous>) at mergeObject (C:\Users\gregw\git\user-settings\node_modules\deepmerge\dist\cjs.js:86:18) at deepmerge (C:\Users\gregw\git\user-settings\node_modules\deepmerge\dist\cjs.js:117:10) at cloneUnlessOtherwiseSpecified (C:\Users\gregw\git\user-settings\node_modules\deepmerge\dist\cjs.js:34:5) at C:\Users\gregw\git\user-settings\node_modules\deepmerge\dist\cjs.js:94:23
  

  
  

  @roac since you were asking about the commerce template ^

• 

  Martin R

  2 months ago

  Did you by mistake install npmjs deepmerge instead of using the utilities/deepMerge in the project?

• 

  gregwhitworth

  2 months ago

  @Martin R I'm unsure how I would have done that as I just type

  yarn
  

  
  

  @jacobsfletch just in case you have any ideas

  
  

  
  

  Ok, so I commented out almost everything and kept adding in sections of the user since other collections were working as expected. It ended up being this hook that was causing the issue:

  
  
  hooks: { beforeChange: [protectRolesBeforeCreate], }
  
  

  Which has this code:

  
  import type { FieldHook } from 'payload/types' // eslint-disable-next-line consistent-return export const protectRolesBeforeCreate: FieldHook = async ({ req, data, operation }) => { if (operation === 'create') { if (req.user) { const sanitizedData = data const isAdmin = req.user.roles.includes('admin') if (!isAdmin) { sanitizedData.roles = ['customer'] } return sanitizedData } } }
  
  

  @jacobsfletch I'm trying to get the debugger for VSCode hooked up to Payload to provide you with more info into what I'm hitting specifically; but figured I'd share this since this isn't really a "solution" but a workaround at this point

• 

  Martin R

  2 months ago

  It was because your log included node_modules\deepmerge 🙂

  
  

  
  

  I just cloned both the frontend and backend e-commerce repo and followed the guide in the readme setting up stripe and environment keys, and most things worked fine. Did you change anything in the source? I am asking because, in my case, the hook created a customer just fine. The only extra thing I did to make all things work was adding the correct cors and csrf urls.

• 

  jacobsfletch

  Payload Team

  2 months ago

  Hey there! I have been loosely following this thread but I'm here if you need me. So the steps to recreate are:

  
  

  1. Fresh clone and install

  
  

  2. Boot the app and navigate to the user collection

  
  

  3. Create a new user

  
  

  Is this right? I should be able to find some time this week to boot this up and try to recreate.

• 

  gregwhitworth

  2 months ago

  @Martin R no I didn't change any source code; I hit this using the base install. I didn't do the cors or csrf urls aspect you called out.

  
  

  
  

  @jacobsfletch yes that is correct

• 

  chris38

  last month

  I'm getting the same error with template-ecommerce. I can add/update categories, pages etc but get maximum call stack exceeded when I try to add a user, whether admin or customer. The following appears to be the loop it's stuck in. Could the problem have something to do with that assignment of isMergeableObject function to a var of the same name?

  
  
  

  function isReactElement(value) {

  
  

  return value.$$typeof === REACT_ELEMENT_TYPE

  
  

  }

  
  
  

  function isSpecial(value) {

  
  

  var stringValue = Object.prototype.toString.call(value);

  
  
  

  return stringValue === '[object RegExp]'

  
  

  stringValue === '[object Date]'
  

  isReactElement(value)

  
  

  }

  
  
  

  var isMergeableObject = function isMergeableObject(value) {

  
  

  return isNonNullObject(value)

  
  

  && !isSpecial(value)

  
  

  };

  
  
  

  function cloneUnlessOtherwiseSpecified(value, options) {

  
  

  return (options.clone !== false && options.isMergeableObject(value))

  
  

  ? deepmerge(emptyTarget(value), value, options)

  
  

  : value

  
  

  }

• 

  jacobsfletch

  Payload Team

  last month

  @gregwhitworth @chris38 I took a pass through the ecommerce template yesterday and fixed up a few things, including this "maximum call stack size exceeded" error. Could you pull in the latest code and see if that fixes your issue?

  
  

  
  

  You specifically need the changes that were made to the user hooks. If you're already far along with your own project and customizations, just update each of these three hooks by hand:

  https://github.com/payloadcms/template-ecommerce/tree/main/src/collections/Users/hooks
• 

  chris38

  last month

  Thank you - that fixed it for me