selectpicker is not a function?

I am working on a filter on a website using jQuery with JSON data. Yesterday this filter was working fine. It is now showing an error:

selectpicker is not a function

Can anyone please help me to sort out this issue?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>

<script>
  var dataLoad = <?php echo json_encode( $filterData); ?>
  console.log(dataLoad);
  var body;
  var model;
  var variant;

  $('#selectBody').empty().append('<option selected="selected" value="">Body</option>');
  Object.entries(dataLoad).forEach(([key, value]) => {
    // console.log(`${key} ${value}`);
    $('#selectBody').append(`<option  value="${key}">${key}</option>`);
  });

  function changeType(val) {
    $('.selectpicker').selectpicker('refresh');
    body = val.value
    $('#selectModel').empty().append('<option selected="selected" value="">Model</option>');
    Object.entries(dataLoad).forEach(([key, value]) => {
      if (key === val.value) {
        Object.entries(value).forEach(([k, v]) => {
          $('#selectModel').append(`<option  value="${k}">${k}</option>`);
        });
      }
    });
    $('.selectpicker').selectpicker('refresh');
  }

  function changeModel(val) {
    model = val.value
    $('#selectVariant').empty().append('<option selected="selected" value="">Trim</option>');
    Object.entries(dataLoad).forEach(([key, value]) => {
      if (body === key) {
        Object.entries(value).forEach(([k, v]) => {
          if (k === val.value) {
            Object.entries(v).forEach(([kV, vV]) => {
              $('#selectVariant').append(`<option  value="${kV}">${kV}</option>`);
            });
          }
        });
      }
    });
    $('.selectpicker').selectpicker('refresh');
  }

  function changeVariant(val) {
    model = val.value
    console.log(model, "-------------")
    $('#selectTransmission').empty().append('<option selected="selected" value="">Transmission</option>');
    Object.entries(dataLoad).forEach(([key, value]) => {
      if (body === key) {
        Object.entries(value).forEach(([k, v]) => {
          console.log(k, " -------:", model)
          if (k === model) {
            Object.entries(v).forEach(([kV, vV]) => {
              if (kV === val.value) {
                console.log(value, "--------------------")
                Object.entries(vV).forEach(([kT, vT]) => {
                  $('#selectTransmission').append(`<option  value="${kT}">${kT}</option>`);
                });
              }
            });
          }
        });
      }
    });

    $('.selectpicker').selectpicker('refresh');
  }
</script>

Answer

You need to move bootstrap-select.min.js at the end of all jquery importation for exclude function rewriting.

I cant make a test but you can try this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>