$modal.modal is not a function

Em đang upload images với thư viện bootstrap-fileinput. Đến phần zoom ảnh thì ko thể zoom được và lỗi $modal.modal is not a function Đã vài lần phải bỏ luôn cái thư viện vì lỗi này, ai có cao kiến chỉ em với ạ. Đây là html:

 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
   {!! Form::label(null, trans('dish.dish_picture')) !!}(<span class="red">*</span>)
   <div class="main-section">
       <div class="form-group">
           <div class="file-loading">
               {!! Form::file('file', ['class' => 'file', 'multiple' => true, 'id' => 'file-1', 'name' => 'file']) !!}
           </div>
       </div>
   </div>
</div>

Thư viện và js upload:

   <script src="{{ asset('bower_components/bootstrap-fileinput/js/fileinput.js') }}" type="text/javascript"></script>
   <script src="{{ asset('bower_components/bootstrap-fileinput/themes/fa/theme.js') }}" type="text/javascript"></script>
   <script src="{{ asset('bower_components/popper.js/dist/umd/popper.min.js') }}" type="text/javascript"></script>

   <script type="text/javascript">
       $("#file-1").fileinput({
           theme: 'fa',
           uploadUrl: "http://127.0.0.1:8000/dishes/image-uploads",
           uploadExtraData: function() {
               return {
                   _token: $("input[name='_token']").val(),
               };
           },
           allowedFileExtensions: ['jpg', 'png', 'gif'],
           overwriteInitial: false,
           maxFileSize:200,
           maxFilesNum: 10,
           slugCallback: function (filename) {
               console.log(filename);                                                                                               
               return filename.replace('(', '_').replace(']', '_');
           }
       });
       $('#file-1').on('fileuploaded', function(event, data, previewId, index) {
           var response = data.response;
           console.log(response);
           var img = $('#img').val();
           $('#img').val(img + ',' + response.data.image);
       });
   </script>

Đoạn $modal.modal('show'); trong file fileinput.js báo lỗi $modal.modal is not a function

_zoomPreview: function ($btn) {
   var self = this, $frame, $modal = self.$modal;
   if (!$btn.length) {
       throw 'Cannot zoom to detailed preview!';
   }
   $h.initModal($modal);
   $modal.html(self._getModalContent());
   $frame = $btn.closest($h.FRAMES);
   self._setZoomContent($frame);
   $modal.modal('show');
   self._initZoomButtons();
},