Modal Stacked - "maximum call stack size exceeded error"
While using nested pop up screens, I get this error when I click on the inputs-selectors within the pop up. I could not fix it. I only get this error in this "stacked modal" structure. Can anyone help me how to solve it?
Replies (6)
Hi,
Could you please clarify your Metronic version ? Are you able to reproduce it Stacked Modals with the latest Metronic v8.2.0 ?
If the issue is in your custom code please provide us your code via gist.github.com ?
Regards.
Hello,
I am currently actively using the "metronic_v8.1.8" version and I did not have the chance to try the latest version, but I would like to share a screenshot with you, but I think I cannot share it here. The error I get is "Uncaught RangeError at line plugins.bundle.js:25: Maximum call stack size exceeded." error is returning on my website.
Could this be another reason that could cause an error?
On my login screen, I set my layout to null by default (such as Layout==null), but on my homepage, my layout appears as I defined it, and this pop up screen works on my login screen without giving any errors. Could the problem be in my layout?
Hi,
In the recent Metronic update we added some improvements for the Stacked Modal feature ?
Can you try to update initModal in src/js/components/app.js with the below version and try to recompile your assets with gulp or webpack?
var initModal = function() {
var elements = Array.prototype.slice.call(document.querySelectorAll("[data-bs-stacked-modal]"));
if (elements && elements.length > 0) {
elements.forEach((element) => {
if (element.getAttribute("data-kt-initialized") === "1") {
return;
}
element.setAttribute("data-kt-initialized", "1");
element.addEventListener("click", function(e) {
e.preventDefault();
const modalEl = document.querySelector(this.getAttribute("data-bs-stacked-modal"));
if (modalEl) {
const modal = new bootstrap.Modal(modalEl, {backdrop: false});
modal.show();
}
});
});
}
}Regards.
Hello,
I did not fully understand the method you mentioned, but I used the javascript in the "components" screen, I replaced the code you sent with my own, but it gave me a syntax error. I didn't fully understand the "compiling with Gulp or webpack" thing, and I didn't know how to do it, so I don't know what to do.
Hi,
May I know your Metronic version ? Please note that in order to modify core JS for Metronic you will need to modify it in the source files and compile the changes into the assets folder. This is a normal approach and you can spend a few hours and figure it out by referring to our guides. Non-developers also can handle this as well.
You can copy the code from Github Gist
If you are using some recent versions of Metronic you can easily include this quick fix and be able to recompile your assets.
Then recompile your assets folder with Gulp to update initModal in src/js/components/app.js.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
For more info please check Quick Setup guide.
Regards.
I also encountered this problem, I am using this version: metronic_html_v8.2.7_demo31.zip.
This is my initModal(I have compare this to yours, it, they are same to each other.):
var initModal = function() {
var elements = Array.prototype.slice.call(document.querySelectorAll("[data-bs-stacked-modal]"));
if (elements && elements.length > 0) {
elements.forEach((element) => {
if (element.getAttribute("data-kt-initialized") === "1") {
return;
}
element.setAttribute("data-kt-initialized", "1");
element.addEventListener("click", function(e) {
e.preventDefault();
const modalEl = document.querySelector(this.getAttribute("data-bs-stacked-modal"));
if (modalEl) {
const modal = new bootstrap.Modal(modalEl, {backdrop: false});
modal.show();
}
});
});
}
}This is error stack:
PS E:\metronic_html_v8.2.7_demo31\tools> gulp --demo31
Using gulp config file: "../../gulp.config.js"
[22:05:08] Using gulpfile E:\metronic_html_v8.2.7_demo31\tools\gulpfile.js
[22:05:08] Starting "default"...
[22:05:08] Starting "cleanTask"...
[22:05:08] Finished "cleanTask" after 8.76 ms
[22:05:08] Starting "buildBundleTask"...
[22:05:08] Finished "buildBundleTask" after 71 ms
[22:05:08] Finished "default" after 82 ms
(node:6412) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
E:\metronic_html_v8.2.7_demo31\tools\node_modules\sass\sass.dart.js:6306
throw error;
^
RangeError: Maximum call stack size exceeded
at Stats.set [as ctime] (node:internal/fs/utils:495:7)
at Stats.set [as ctime] (node:internal/fs/utils:495:18)
at Stats.set [as ctime] (node:internal/fs/utils:495:18)
at Stats.set [as ctime] (node:internal/fs/utils:495:18)
at Stats.set [as ctime] (node:internal/fs/utils:495:18)
at Stats.set [as ctime] (node:internal/fs/utils:495:18)
at Stats.set [as ctime] (node:internal/fs/utils:495:18)
at Stats.set [as ctime] (node:internal/fs/utils:495:18)
at Stats.set [as ctime] (node:internal/fs/utils:495:18)
at Stats.set [as ctime] (node:internal/fs/utils:495:18) {
dartException: StackOverflowError {}
}
Node.js v22.0.0
PS E:\metronic_html_v8.2.7_demo31\tools
