SPFx | (...).modal is not a function

Question

Olá,

Estou tentando usar de MODAL do BootStrap no SharePoint Framework e tenho recebido o erro abaixo:

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_4__(...).modal is not a function

Estou usando como base este exemplo.

No meu caso criei uma table e nela tenho uma coluna que chama um evento de click e neste evento de click tento abrir o popUp.

Coluna da Tabela:

"<a id='" + item.ID + "' href='#' class='confirmEditFileLink'>" + "Edit Item" + "</a>"

Click:

  // Edit button click event
  $(document).on('click', '.confirmEditFileLink', function (e) {
    e.preventDefault();
    var id = this.id;

    var requestUri = currentWebUrl.concat("/_api/web/lists/getByTitle('CustomList')/items(" + id + ")");
    
    $.ajax({
        url: requestUri,
        method: "GET",
        contentType: "application/json;odata=verbose",
        headers: { "accept": "application/json;odata=verbose" },
        success: function (data) {

            $('#fileTitle').val(data.d.Title);
            $('#fileName').val(data.d.Title);
            $('#fileType').val(data.d.Title);
            $('#team').val(data.d.Title);
            $('#fileId').val(data.d.Id);
            $('#myModalLabel').html('Edit File');
            (<any>$('#myModalNorm')).modal('show');
            $("#etag").val(data.d.__metadata.etag);
        }
    });
  });

Html do Modal

<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                           <span aria-hidden="true">&times;</span>
                           <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        Add New File
                    </h4>
                </div>
                <!-- Modal Body -->
                <div class="modal-body" id="modalBody">
                    <form role="form" id="fileForm">
                      <div class="form-group">
                        <label>File Title</label>
                          <input class="form-control" id="fileTitle"/>
                      </div>
                      <div class="form-group">
                        <label>File Name</label>
                          <input class="form-control" id="fileName"/>
                      </div>
                      <div class="form-group">
                        <label>File Type</label>
                          <input class="form-control" id="fileType"/>
                      </div>
                         <div class="form-group">
                        <label>Team</label>
                          <input class="form-control" id="team"/>
                      </div>
                      <!-- hidden controls -->
                      <div style="display: none">
                          <input id="etag" />
                          <input id="fileId" />
                      </div>
                      </form>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-danger" data-dismiss="modal" onclick='updateFormLabel();'>
                            Cancel
                          </button>
                          <button type="submit" class="btn btn-primary" id="fileFormSubmit">
                            Submit
                          </button>
                      </div>
                </div>
            </div>
        </div>
    </div>

O que pode ser?

Obrigado

---

[Gosto de compartilhar problemas com soluções que encontro no dia de trabalho]