RangeError: Maximum call stack size exceeded

[aliteqqed]

I am getting the following error after building using vite.

RangeError: Maximum call stack size exceeded at _I (index.mjs:12:17) at Pa (index.mjs:75:42) at Pa (index.mjs:115:12) at Pa (index.mjs:115:12) at Pa (index.mjs:115:12) at Pa (index.mjs:115:12) at Pa (index.mjs:115:12) at Pa (index.mjs:115:12) at Pa (index.mjs:115:12) at Pa (index.mjs:115:12)

The issue seems to arise from the equal function

[gilbarbara]

Hey @aliteqqed

Please reply with an example in the original issue intead.

[TSMMark]

I'm also getting this stack too deep error when using react-joyride. Only in prod and I can't get a local repro even using the same data. Weird

[TSMMark]

my backtrace does seem to point to isRegex but I don't know if it's relevant or just where the stack size happened to become exceeded

Maximum call stack size exceeded
at line 9, column 15.value in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:9
at line 91, column 8.isRegex in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:91
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115

Yeah I don't think it's necessarily an issue with isRegex. Another instance of the error does not include isRefex:

Maximum call stack size exceeded
at line 71, column 15.left in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:71
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115
at line 115, column 11.equal in webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115

Sourcemaps point to this left / right comparison

Message: Maximum call stack size exceeded
at left line 71, column 15 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:71) 
  
              }
  return true;
}
function equal(left, right) {
  if (left === right) {
    return true;
  }
          
at equal line 115, column 11 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115) 
  
                  if (key === "_owner" && left.$$typeof) {
        continue;
      }
      if (!equal(left[key], right[key])) {
        return false;
      }
    }
          
at equal line 115, column 11 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115) 
  
                  if (key === "_owner" && left.$$typeof) {
        continue;
      }
      if (!equal(left[key], right[key])) {
        return false;
      }
    }
          
at equal line 115, column 11 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115) 
  
                  if (key === "_owner" && left.$$typeof) {
        continue;
      }
      if (!equal(left[key], right[key])) {
        return false;
      }
    }
          
at equal line 115, column 11 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115) 
  
                  if (key === "_owner" && left.$$typeof) {
        continue;
      }
      if (!equal(left[key], right[key])) {
        return false;
      }
    }
          
at equal line 115, column 11 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115) 
  
                  if (key === "_owner" && left.$$typeof) {
        continue;
      }
      if (!equal(left[key], right[key])) {
        return false;
      }
    }
          
at equal line 115, column 11 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115) 
  
                  if (key === "_owner" && left.$$typeof) {
        continue;
      }
      if (!equal(left[key], right[key])) {
        return false;
      }
    }
          
at equal line 115, column 11 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115) 
  
                  if (key === "_owner" && left.$$typeof) {
        continue;
      }
      if (!equal(left[key], right[key])) {
        return false;
      }
    }
          
at equal line 115, column 11 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115) 
  
                  if (key === "_owner" && left.$$typeof) {
        continue;
      }
      if (!equal(left[key], right[key])) {
        return false;
      }
    }
          
at equal line 115, column 11 (webpack:///../../node_modules/@gilbarbara/deep-equal/dist/index.mjs:115) 
  
                  if (key === "_owner" && left.$$typeof) {
        continue;
      }
      if (!equal(left[key], right[key])) {
        return false;
      }
    }

[TSMMark]

To my ignorant eyes, it looks like this react-specific handling is insufficient for some case(s)

https://github.com/gilbarbara/deep-equal/blob/b83ebe84311d62d28278afd6da03803f27e2c957/src/index.ts#L141C7-L147C8

if (key === '_owner' && left.$$typeof) {
        // React-specific: avoid traversing React elements' _owner.
        //  _owner contains circular references
        // and is not needed when comparing the actual elements (and not their owners)
        // eslint-disable-next-line no-continue
        continue;
      }

[TSMMark]

I popped a breakpoint in here and I'm guessing it has to do with these deeply nested alternate properties

Apparently this alternate property is react fiber internals:

During the reconciliation process, React creates a new Fiber tree (the "workInProgress" tree) representing the updated UI. The "alternate" property on each Fiber in the "workInProgress" tree points to its corresponding Fiber in the previous Fiber tree (the "current" tree).

Perhaps the alternate property should be omitted?

---

Sorry for the comment spam — I'm posting realtime as I find more info, I hope that's okay. I should also say thank you for the really great joyride package btw @gilbarbara ❤️