Search code examples
javascripthtmlcssbootstrap-modalbootstrap-5

Bootstrap error: this._config is undefined


I have the following button:

<button class="kv_styleclass_0 btn btn-outline-success btn-lg" 
    data-bs-toggle="modal" 
    data-bs-target="formModal" 
    type="button">
        Стать участником
</button>

that triggers the following modal dialog:

<div class="modal fade" 
    aria-labelledby="formModal_label" 
    aria-hidden="true" 
    id="formModal" 
    tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" 
                        id="formModal_label">
                            Анкета участника
                    </h5>
                    <button class="btn btn-secondary btn-primary" 
                        data-bs-dismiss="modal" 
                        type="button">
                            Закрыть
                    </button>
                </div>
                <div class="modal-body">
                    <iframe src="..." 
                        name="..." 
                        style="height: 407px;" 
                        width="650" 
                        frameborder="0">
                    </iframe>
                </div>
            </div>
        </div>
    </div>

When I click the button, I get the following error:

Uncaught TypeError: this._config is undefined
    _initializeBackDrop bootstrap.esm.js:2916
    ...

Using NPM to get Bootstrap. Using Bootstrap v5.2.3.

I tried to get Bootstrap JS by including the <script> tag in my code in different positions. With Popper.JS.


Solution

  • I just had the same issue and I solved it by adding a # to the data-bs-target. This is what the modified code would look like:

    <button class="kv_styleclass_0 btn btn-outline-success btn-lg" 
        data-bs-toggle="modal" 
        data-bs-target="#formModal" 
        type="button">
            Стать участником
    </button>
    
    
    

    It looks like you are passing in a string while the data-bs-target attribute expects an id.

    EDIT: I just saw that CodeCaster beat me to it in a comment. Oops!