Bootstrap error: this._config is undefined

Question

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.

Answer 1

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!

Answer 2

I encountered the same JavaScript exception in some code another developer had copied and pasted which contained

<a type="button" onclick="fn()" data-bs-dismiss="modal">text</a>

inside a <div> which wasn't a Bootstrap modal at all. Clicking on the button worked (the JavaScript function fn executed as expected) but also raised this exception -- presumably as the Boostrap JavaScript tried to find the non-existent enclosing modal.

To fix it I just removed the offending data-bs-dismiss attribute entirely.