I've got the ecommerce template setup and am trying to create a new user, and when I click save I get the following error:
ERROR (payload): RangeError: Maximum call stack size exceeded
Any ideas?
Not too much info to troubleshoot. Any stack trace available?
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
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 ^
Did you by mistake install npmjs deepmerge instead of using the utilities/deepMerge in the project?
@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
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.
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.
@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
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
}
@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/hooksThank you - that fixed it for me
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.