'TypeError: $(...).sortable is not a function' summernote and sortable conflict?

I use summernote (https://summernote.org/) and sortable (https://jqueryui.com/sortable/) in my project in my own cms.

if I don't link the app.js from laravel I get the error: Uncaught TypeError: $(...).summernote is not a function But then my sortable functions as it should

But when I link the app.js I get the error: Uncaught TypeError: $(...).sortable is not a function

I already checked the order of loading jquery and jquery UI and that is correct.

What I found on google is that I need to add the jquery plugin sortable in app.js ? but I can't get that to work.

Layout blade

  <!-- Scripts -->
    <script src="" defer></script>
    <!-- when linked error with sortable, without error with summernote -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>
    <script src="/js/jquery-3.4.1.min.js"></script>
    <script src="/js/jquery-ui.min.js"></script>
    <script src="/js/summernote.js"></script>
    @yield('script')

edit.blade

@section('script')
  <script src="/js/sortable.js"></script>
@endsection

<div class="form-group">
                            <label for="content">Content:</label>
                            <textarea name="content" class="summernote" rows="10" cols="30"></textarea>
                        </div>

  <ul class="sortable-posts list-unstyled">
                        @foreach($imgs as $img)
                        <li class="list-group-item" id="">
                            <img src="../../../" alt="" class="img-sortable">
                        </li>
                        @endforeach
                    </ul>

sortable.js

$(document).ready(function(){
  $(function() {
      $(".sortable-posts").sortable({
        placeholder: 'drop-placeholder',
          stop: function() {
              $.map($(this).find('li'), function(el) {
                  var id = el.id;
                  var sorting = $(el).index();
                  $.ajax({
                      url: '../../sortImgs',
                      type: 'GET',
                      data: {
                          id: id,
                          sorting: sorting
                      },
                  });
              });
          }
      });
  });
});

summernote.js

$(document).ready(function() {
  $('.summernote').summernote({
    toolbar: [
      // [groupName, [list of button]]
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['font', ['strikethrough', 'superscript', 'subscript']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['height', ['height']],
      ['insert', ['video']],
      ['view'], ['codeview']
    ]
  });
});

Anyone an idea of what is causing the conflict between the 2? and how to solve it

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2ZWgsol
via IFTTT