jquery issue in Rails 6 project

Question

I have facing issues of jquery in my rails 6 project. I've attached the picture of my errors enter image description here

Ruby version is 2.7.6 and Rails version is 6.1.3. And I'm using asset pipeline in my project. So I have no concern with webpacker

In my application.js, I have

//= require active_admin/base
//= require jquery
//= require jquery-ui
//= require turbolinks
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require filter_bar
//= require filter_box
//= require nested_form_fields
//= require bootstrap-select.min
//= require tinymce
//= require parsley
//= require raphael-2.1.0.min
//= require morris
//= require dashboard-charts
//= require highcharts
//= require highcharts/highcharts-more
//= require bootstrap-datepicker
//= require_self
//= require_tree .

The gem list relevant to this issue I have is

gem 'jquery-rails', '~> 4.5', '>= 4.5.1'
gem 'jquery-ui-rails', '~> 4.2.1'
gem 'jquery-turbolinks', '~> 2.1'
gem 'activeadmin', '~> 2.13', '>= 2.13.1'

what i have tried so far is, I made different combination by moving jquery and relevant things to different position in application.js. I tried the following combination and many more. But end up finding nothing about this issue. I know the issue is happening because of active admin

//= require jquery
//= require jquery-ui
//= require turbolinks
//= require jquery.turbolinks
//= require bootstrap-sprockets
//= require active_admin/base
//= require filter_bar
//= require filter_box
//= require nested_form_fields
//= require bootstrap-select.min
//= require tinymce
//= require parsley
//= require raphael-2.1.0.min
//= require morris
//= require dashboard-charts
//= require highcharts
//= require highcharts/highcharts-more
//= require bootstrap-datepicker
//= require_self
//= require_tree .