Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

Error metronic_laravel_8.2.9


Good afternoon,

The error persists. Do you have an estimate of when you will be able to resolve the issue?

I sincerely apologize for my persistence.

Thank you very much,

Samuel


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)


Hi Samuel Olavo

Sorry for the delay in response.


element = document.querySelector("#kt_modal_users_search_handler");
searchObject = new KTSearch(element);


If searchObject is null, the line below will throw an error:

searchObject.on("kt.search.process", processs);


Could you please check whether the div element associated with #kt_modal_users_search_handler has been removed? That might be causing the issue.

There are a few other elements in the project that use KTSearch as well—for example,
eg. #kt_modal_users_search_handler, #kt_header_search, etc.

I recommend using your IDE's search function to look for "new KTSearch" across the codebase. If you're no longer using certain instances, feel free to remove them.

Let me know if you need help locating or cleaning them up.

Thanks!



Any Update?



Hello,

I apologize for my persistence, but I have already reinstalled everything and made the adjustments as instructed. However, the login errors persist, and I am encountering several errors after authentication that I don’t know how to resolve.

Could you help me fix these errors? Or will you be releasing an updated version with these issues resolved?


scripts.bundle.js:7872

Uncaught TypeError: searchObject.on is not a function
at Object.init (scripts.bundle.js:7872:26)
at HTMLDocument.<anonymous> (scripts.bundle.js:7894:20)
at ri (supportLaravelEcho.js:62:37)
at HTMLDocument.<anonymous> (supportLaravelEcho.js:51:45)
at ue (index.js:165:17)
at index.js:115:66



Root.ts:413

Uncaught Error: You cannot have multiple Roots on the same DOM node
at Root.ts:413:11
at Module.o (Array.ts:75:18)
at new B (Root.ts:411:3)
at B.new (Root.ts:445:16)
at init (widgets.bundle.js:9096:23)
at widgets.bundle.js:9331:4
at Module.o (index.js:1:335899)
at initChart (widgets.bundle.js:9329:7)
at Object.init (widgets.bundle.js:9347:4)
at HTMLDocument.<anonymous> (widgets.bundle.js:9359:20)




Root.ts:413

Uncaught Error: You cannot have multiple Roots on the same DOM node
at Root.ts:413:11
at Module.o (Array.ts:75:18)
at new B (Root.ts:411:3)
at B.new (Root.ts:445:16)
at init (widgets.bundle.js:11078:23)
at widgets.bundle.js:11360:4
at Module.o (index.js:1:335899)
at initChart1 (widgets.bundle.js:11359:7)
at Object.init (widgets.bundle.js:11376:4)
at HTMLDocument.<anonymous> (widgets.bundle.js:11388:19)



create-app.js:24

Uncaught TypeError: stepperObj.on is not a function
at initStepper (create-app.js:24:14)
at Object.init (create-app.js:317:4)
at HTMLDocument.<anonymous> (create-app.js:326:17)
at ri (supportLaravelEcho.js:62:37)
at HTMLDocument.<anonymous> (supportLaravelEcho.js:51:45)
at ue (index.js:165:17)
at index.js:115:66



users-search.js:66

Uncaught TypeError: searchObject.on is not a function
at Object.init (users-search.js:66:26)
at HTMLDocument.<anonymous> (users-search.js:76:23)
at ri (supportLaravelEcho.js:62:37)
at HTMLDocument.<anonymous> (supportLaravelEcho.js:51:45)
at ue (index.js:165:17)
at index.js:115:66



[Tagify]: input element is already Tagified - Same instance is returned. <input class=&acirc;&#128;&#139;"form-control form-control-solid" value=&acirc;&#128;&#139;"Important, Urgent" name=&acirc;&#128;&#139;"tags" tabindex=&acirc;&#128;&#139;"-1">&acirc;&#128;&#139;



Root.ts:1950 

Uncaught TypeError: Failed to execute "getComputedStyle" on "Window": parameter 1 is not of type "Element".
at B._updateComputedStyles (Root.ts:1950:25)
at B._checkComputedStyles (Root.ts:1965:12)
at B._renderFrame (Root.ts:1083:9)
at B._runTicker (Root.ts:1115:22)
at Root.ts:1164:10Understand this errorAI



Hi

Sorry for the delay. Thank you for your solutions, Gerardo Navas.

The duplicate validation messages could be caused by multiple event listeners being attached to the same elements.

Add a check to ensure that the validator is only initialized once, preventing multiple initializations which could lead to unexpected behavior.

if (validator) return; // Prevent multiple initializations


Remove existing event listeners before adding new ones to prevent multiple registrations of the same event handler.

submitButton.removeEventListener("click", handleDemoClick); // Prevent multiple registrations


Separate the event handler logic into distinct functions (handleDemoClick and handleAjaxClick)

Use finally method in the promise chain to make sure that the loading indicator is removed and the button is re-enabled..

.finally(() => {
submitButton.removeAttribute("data-kt-indicator");
submitButton.disabled = false;
});



Good morning, Thank you for your reply but I still have multiple errors with this version:

scripts.bundle.js:7872 Uncaught TypeError: searchObject.on is not a function
at Object.init (scripts.bundle.js:7872:26)
at HTMLDocument.<anonymous> (scripts.bundle.js:7894:20)
at ri (supportNavigate.js:11:14)
at HTMLDocument.<anonymous> (supportNavigate.js:6:52)
at ue (index.js:221:14)
at index.js:192:9
Root.ts:413 Uncaught Error: You cannot have multiple Roots on the same DOM node
at Root.ts:413:11
at Module.o (Array.ts:93:3)
at new B (Root.ts:411:3)
at B.new (Root.ts:445:16)
at init (widgets.bundle.js:9096:23)
at widgets.bundle.js:9331:4
at Module.o (Utils.ts:27:3)
at initChart (widgets.bundle.js:9329:7)
at Object.init (widgets.bundle.js:9347:4)
at HTMLDocument.<anonymous> (widgets.bundle.js:9359:20)
Root.ts:413 Uncaught Error: You cannot have multiple Roots on the same DOM node
at Root.ts:413:11
at Module.o (Array.ts:93:3)
at new B (Root.ts:411:3)
at B.new (Root.ts:445:16)
at init (widgets.bundle.js:11078:23)
at widgets.bundle.js:11360:4
at Module.o (Utils.ts:27:3)
at initChart1 (widgets.bundle.js:11359:7)
at Object.init (widgets.bundle.js:11376:4)
at HTMLDocument.<anonymous> (widgets.bundle.js:11388:19)
create-app.js:24 Uncaught TypeError: stepperObj.on is not a function
at initStepper (create-app.js:24:14)
at Object.init (create-app.js:317:4)
at HTMLDocument.<anonymous> (create-app.js:326:17)
at ri (supportNavigate.js:11:14)
at HTMLDocument.<anonymous> (supportNavigate.js:6:52)
at ue (index.js:221:14)
at index.js:192:9
users-search.js:66 Uncaught TypeError: searchObject.on is not a function
at Object.init (users-search.js:66:26)
at HTMLDocument.<anonymous> (users-search.js:76:23)
at ri (supportNavigate.js:11:14)
at HTMLDocument.<anonymous> (supportNavigate.js:6:52)
at ue (index.js:221:14)
at index.js:192:9

plugins.bundle.js:29494 [Tagify]: input element is already Tagified - Same instance is returned.
Root.ts:1950 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at B._updateComputedStyles (Root.ts:1950:25)
at B._checkComputedStyles (Root.ts:1965:12)
at B._renderFrame (Root.ts:1083:9)
at B._runTicker (Root.ts:1115:22)
at _ticker._ticker (Root.ts:1164:10)
Root.ts:1950 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at B._updateComputedStyles (Root.ts:1950:25)
at B._checkComputedStyles (Root.ts:1965:12)
at B._renderFrame (Root.ts:1083:9)
at B._runTicker (Root.ts:1115:22)
at _ticker._ticker (Root.ts:1164:10)



Hi Samuel, I was able to solve it this way:
edit : \resources\_keenthemes\src\js\custom\authentication\sign-in\general.js
code:
"use strict";
console.log("inicio");

// Class definition
var KTSigninGeneral = function () {
// Elements
var form;
var submitButton;
var validator;

// Handle form validation
var handleValidation = function () {
if (validator) return; // Evitar inicialización múltiple

// Init form validation rules
validator = FormValidation.formValidation(
form,
{
fields: {
'email': {
validators: {
regexp: {
regexp: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: 'The value is not a valid email address',
},
notEmpty: {
message: 'Email address is required'
}
}
},
'password': {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '', // comment to enable invalid state icons
eleValidClass: '' // comment to enable valid state icons
})
}
}
);
};

// Handle form submission for demo purposes
var handleSubmitDemo = function () {
submitButton.removeEventListener('click', handleDemoClick); // Evitar múltiples registros
submitButton.addEventListener('click', handleDemoClick);
};

var handleDemoClick = function (e) {
e.preventDefault();

validator.validate().then(function (status) {
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
submitButton.disabled = true;

setTimeout(function () {
submitButton.removeAttribute('data-kt-indicator');
submitButton.disabled = false;

Swal.fire({
text: "You have successfully logged in!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
form.querySelector('[name="email"]').value = "";
form.querySelector('[name="password"]').value = "";

var redirectUrl = form.getAttribute('data-kt-redirect-url');
if (redirectUrl) {
location.href = redirectUrl;
}
}
});
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
};

// Handle form submission with AJAX
var handleSubmitAjax = function () {
submitButton.removeEventListener('click', handleAjaxClick); // Evitar múltiples registros
submitButton.addEventListener('click', handleAjaxClick);
};

var handleAjaxClick = function (e) {
e.preventDefault();

validator.validate().then(function (status) {
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
submitButton.disabled = true;

axios.post(submitButton.closest('form').getAttribute('action'), new FormData(form))
.then(function (response) {
if (response) {
form.reset();
Swal.fire({
text: "You have successfully logged in!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});

const redirectUrl = form.getAttribute('data-kt-redirect-url');
if (redirectUrl) location.href = redirectUrl;
} else {
Swal.fire({
text: "Sorry, the email or password is incorrect, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: { confirmButton: "btn btn-primary" }
});
}
})
.catch(function () {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: { confirmButton: "btn btn-primary" }
});
})
.finally(() => {
submitButton.removeAttribute('data-kt-indicator');
submitButton.disabled = false;
});
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again!",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: { confirmButton: "btn btn-primary" }
});
}
});
};

var isValidUrl = function (url) {
try { new URL(url); return true; } catch { return false; }
};

// Public functions
return {
init: function () {
form = document.querySelector('#kt_sign_in_form');
submitButton = document.querySelector('#kt_sign_in_submit');

handleValidation();

if (isValidUrl(submitButton.closest('form').getAttribute('action'))) {
handleSubmitAjax();
} else {
handleSubmitDemo();
}
}
};
}();

// On document ready
KTUtil.onDOMContentLoaded(function () { KTSigninGeneral.init(); });


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(