'jquery-rails' and 'jquery-ui-rails' can they be managed under one project?

Question

I have a Rails app using Rails 5.1.6 and ruby 2.3.5p376

I have these two gems in my Gemfile

gem 'jquery-rails', '~> 4.3.3'  
gem 'jquery-ui-rails', '~> 6.0.1'

In show.html.erb I have the following:

<script>
$( function() {
  $( "#datepicker" ).datepicker();
} );
</script>

<p>Date: <input type="text" id="datepicker"></p>
<p id="notice"><%= notice %></p>

In application.js

//= require jquery-ui
//= require jquery
//= require rails-ujs
//= require turbolinks
//= require_tree .

In application.css

/*
 *= require jquery-ui
 *= require_tree .
 *= require_self
 */

The browser now shows the following error:

Uncaught ReferenceError: jQuery is not defined
at application

If 'jquery-ui-rails' is removed from the app jquery function working fine.

Answer 1

This is your error here:

//= require jquery-ui
//= require jquery

Dependent scripts are included in order, i.e. when jquery-ui is loaded, it cannot find jQuery (which would get loaded next, but the script execution exits with your error and cannot continue).

To solve this, place jquery before jquery-ui:

//= require jquery
//= require jquery-ui