title: 'TypeError: $(...).sortable is not a function' summernote and sortable conflict?
body: <p>I use summernote (<a href="https://summernote.org/" rel="nofollow noreferrer">https://summernote.org/</a>) and sortable (<a href="https://jqueryui.com/sortable/" rel="nofollow noreferrer">https://jqueryui.com/sortable/</a>) in my project in my own cms.</p>
  
  <p>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</p>
  
  <p>But when I link the app.js I get the error:
  Uncaught TypeError: $(...).sortable is not a function</p>
  
  <p>I already checked the order of loading jquery and jquery UI and that is correct.</p>
  
  <p>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.</p>
  
  <p>Layout blade</p>
  
  <pre class="lang-html prettyprint-override"><code>  &lt;!-- Scripts --&gt;
      &lt;script src="{{ asset('js/app.js') }}" defer&gt;&lt;/script&gt;
      &lt;!-- when linked error with sortable, without error with summernote --&gt;
  
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/summernote.js"&gt;&lt;/script&gt;
      @yield('script')
  
  </code></pre>
  
  <p>edit.blade</p>
  
  <pre class="lang-html prettyprint-override"><code>
  @section('script')
    &lt;script src="/js/sortable.js"&gt;&lt;/script&gt;
  @endsection
  
  &lt;div class="form-group"&gt;
                              &lt;label for="content"&gt;Content:&lt;/label&gt;
                              &lt;textarea name="content" class="summernote" rows="10" cols="30"&gt;{{$project-&gt;content}}&lt;/textarea&gt;
                          &lt;/div&gt;
  
    &lt;ul class="sortable-posts list-unstyled"&gt;
                          @foreach($imgs as $img)
                          &lt;li class="list-group-item" id="{{ $img-&gt;id }}"&gt;
                              &lt;img src="../../../{{$img-&gt;src}}" alt="" class="img-sortable"&gt;
                          &lt;/li&gt;
                          @endforeach
                      &lt;/ul&gt;
  </code></pre>
  
  <p>sortable.js</p>
  
  <pre class="lang-js prettyprint-override"><code>$(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
                        },
                    });
                });
            }
        });
    });
  });
  </code></pre>
  
  <p>summernote.js</p>
  
  <pre class="lang-js prettyprint-override"><code>$(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']
      ]
    });
  });
  </code></pre>
  
  <p>Anyone an idea of what is causing the conflict between the 2? 
  and how to solve it</p>