error on modal; _initializeBackDrop; undefined is not an ob

Can you say more about your setup? I cannot recreate this problem.

Safari Inspector Error:*_The modal works, just getting the error:_*

_initializeBackDrop modal.js:158
TypeError: undefined is not an object (evaluating 'this._config.backdrop')

modal.js:158:

// Private
_initializeBackDrop() {
return new Backdrop({
    isVisible: Boolean(this._config.backdrop) && Boolean(!this._config.modalNonInvasive), // 'static' option will be translated to true, and booleans will keep their value,
    isAnimated: this._isAnimated(),
});
}

modal-settings:

<section>
        <div class="modal fade" id="tsuModal" data-mdb-backdrop="static" data-mdb-keyboard="false" data-mdb-focus="true" tabindex="-1" aria-labelledby="tsuModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable"> 
        <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="tsuModalLabel">TSU</h5>
        <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
      <section style="position:relative; display:none" id = "contact_us_section">
        contact-us
      </section>
      <div class="d-flex justify-content-center">
        <div id="api_error" class="note note-danger mb-3 mt-3" style="display:none;"></div>
        <div id="api_success" class="note note-success mb-3 mt-3" style="display:none;"></div>
      </div>
     </div>
      <div class="modal-footer" >
        <button type="button" class="btn btn-dark btn-lg" data-mdb-dismiss="modal">Close</button>
        </div>
              </div> 
            </div>
          </div>
    </section>

modal-triggers:

<button class="btn btn-primary" id="signinClient" href="#!" data-mdb-toggle="modal" data-mdb-target="#tsuModal">
<li class="list-group-item  bg-light hover-shadow ripple"  data-mdb-ripple-color="primary">
<span class="d-inline-block" data-mdb-toggle="tooltip"data-mdb-placement="right" title="make requests, and get status updates."> 
Sign-In              
</span> 
</li>
</button>
<button class="btn btn-primary" id="signinVendor" href="#!" data-mdb-toggle="modal" data-mdb-target="#tsuModal">
<li class="list-group-item  bg-light hover-shadow ripple" data-mdb-ripple-color="primary">
Vendor           
</li>
</button>

modal-JS:

const elements_config = [
{ // modal-registration-client
btnId: 'signinRegistrationClient',
sections: [
{ id: 'client_section', display: 'block' },
{ id: 'client_registration_form', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'client_signin_form', display: 'none' },
{ id: 'client_validation_code_form', display: 'none' },
{ id: 'client_accordion', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-signin-client
btnId: 'signinClient',
sections: [
{ id: 'client_section', display: 'block' },
{ id: 'client_signin_form', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_validation_code_form', display: 'none' },
{ id: 'client_accordion', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-signin-interpreter
btnId: 'signinInterpreter',
sections: [
{ id: 'interpreter_section', display: 'block' },
{ id: 'interpreter_signin_form', display: 'block' },    
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'interpreter_accordion', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-signin-vendor
btnId: 'signinVendor',
sections: [
{ id: 'vendor_section', display: 'block' },
{ id: 'vendor_signin_form', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'vendor_accordion', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_section', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-glossary
btnId: 'signinGlossary',
sections: [
{ id: 'glossary_section', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_section', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-contact-us
btnId: 'signinContactUs',
sections: [
{ id: 'contact_us_section', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_section', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
]
}
];
// Function to toggle section display
function toggleSectionDisplay(section, display) {
if (section) {
section.style.display = display;
}
}
// Function to handle click
function handleClick(sections) {
sections.forEach((section) => {
toggleSectionDisplay(document.getElementById(section.id), section.display);
});
}
// Initialize event listeners
elements_config.forEach((config) => {
const btn = document.getElementById(config.btnId);
btn.addEventListener('click', () => handleClick(config.sections));
});

I get the error on localhost, 127.0.0.1, and hosted with a domain name: the modal works, just an error from the Safari inspector.

Unfortunately, we are unable to reproduce the error. We have tested it on 3 different MacBooks and the error did not occur on any of them. We also used BrowserStack to test it, but we were unable to reproduce the error. It is possible that the problem is caused by some additional software (extension) that you are using. Have you checked if the problem also occurs on another device?

Hi,

I have this exact same issue.

Regards, Stefan