search

digicorp / propeller

Propeller - Develop more, Code less. Propeller is a front-end responsive framework based on Google's Material Design Standards & Bootstrap.
http://propeller.in
MIT License
1.13k stars 139 forks source link

Uncaught RangeError: Maximum call stack size exceeded #81

Open SeraVault opened 6 years ago

SeraVault commented 6 years ago

I have a Bootstrap "row" that contains 40+ PMD "cards". The cards have a DIV with the "pmd-card-title" class and a DIV with the "pmd-card-body" class. If I render the info without the "pmd-card" DIV, it works fine. Rendering the cards are throwing a "Maximum call stack size exceeded". Any ideas?

monika-digicorp commented 6 years ago

@SeraVault: Can you please share a screenshot of the issue you are facing. Also, if possible please share the code snippet for our better understanding.

SeraVault commented 6 years ago

The following HTML code (a card repeated 100 times) is causing a "RangeError: Maximum call stack size exceeded" error.


TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
TITLE
TEXT - BODY
BUTTONS
monika-digicorp commented 6 years ago

We did try your code and are unable to find any error.

Can you please share the step by step procedure you are doing and the list of technologies you are using with their versions?

Also if possible please share a link to your page for our better understanding.

micschwarz commented 6 years ago

It's possible to fix by surrounding the content of the else branch in the processNode() function:

try {
    var childNodes = node.childNodes;
    processNodes(childNodes, function () {
        processNode(nodes, index + 1, function () {
            callback();
        });
    });
} catch (e) {
    // Do whatever
}
micschwarz commented 5 years ago

I've gone over the code again... the problem is recursion. Simply exchange the whole observer code starting in line 87 with my version:

$(document).ready(function () {
    observeDOM(document.querySelector('body'), function (mutations) {
        mutations.forEach(function (mutation) {
            if (typeof mutation.addedNodes === "object" && mutation.addedNodes.length > 0) {
                var jqueryTree = $(mutation.addedNodes);
                var handleableObjects = Object.keys(propellerControlMapping);
                handleableObjects.forEach(function (selector) {
                    propellerControlMapping[selector](jqueryTree.find('.' + selector));
                });
            }
        });
    });
});