Maximum call stack size exceeded when saving user in ecommerce template

gregwhitworth2 years ago

11

• 

  denolfe

  2 years ago

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

• 

  Deleted User2 years 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

• 

  gregwhitworth2 years 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
  
  @149873958760480769

  since you were asking about the commerce template ^

• 

  Deleted User2 years ago

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

• 

  gregwhitworth2 years ago

  @456226577798135808

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

  yarn
  
  @808734492645785600

  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 } } }
  
  @808734492645785600

  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

• 

  Deleted User2 years 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

  2 years 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.

• 

  gregwhitworth2 years ago

  @456226577798135808

  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.

  
  
  @808734492645785600

  yes that is correct

• 

  chris3882802 years ago

  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

  2 years ago

  @612318753635565792

  @796916168077606972

  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
• 

  chris3882802 years ago

  Thank you - that fixed it for me