Active Admin interface is broken with error `Uncaught ReferenceError: $ is not defined` in browser console

I run a Ruby on Rails application with Active Admin as an admin backend. My setup is: Ruby 2.5.9 Rails 5.2.8.1 ActiveAdmin 2.9.0 Webpacker 4.3.0

I migrated the application from an older VM and updated some underlying technologies resulting in a somewhat broken interface.

Now in most views of the admin backend i get the following error in my browser console:

base.js:18 Uncaught ReferenceError: $ is not defined
    at base.js:18:3
    at Object.<anonymous> (base.js:14:66)
    at i (bootstrap:19:22)
    at Module.<anonymous> (active_admin.js:1:1)
    at i (bootstrap:19:22)
    at bootstrap:83:10
    at active_admin-d8e2e3d…0e9be08c9d.js:2:921
(anonym)    @   base.js:18
(anonym)    @   base.js:14
i   @   bootstrap:19
(anonym)    @   active_admin.js:1
i   @   bootstrap:19
(anonym)    @   bootstrap:83
(anonym)    @   active_admin-d8e2e3d….js:2

i tried following steps to solve the issue:

1. i ran bundle exec rails generate active_admin:assets --use_webpacker
2. i added this line to my config/initializers/active_admin.rb

config.use_webpacker = true

3. i ran rails g active_admin:webpacker

i got these steps from an issue within the activeadmin github repository: https://github.com/activeadmin/activeadmin/issues/309

Also i already checked similar Questions and nothing seems to help here.

can anyone help me with this issue? I Assume, that other issues in my Rails application have theire cause in this problem.

Thanks in advance and best regards

EDIT:

Since i can not format code in the comment i add the Answer to @engineersmnky comment here:

In app/assets/javascripts/active_adminjs i've added the first line:

//= require jquery
//= require active_admin/base

Additionally in my application.js there are these lines:

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

Also i think, that this should make jquery globally available is this in my config/webpack/plugins/jquery.js

const webpack = require('webpack')

module.exports = new webpack.ProvidePlugin({
  "$":"jquery",
  "jQuery":"jquery",
  "window.jQuery":"jquery"
});

The solution was simpler than i thought...

The problem was that the way my other Rails Gem was handling webpacker interfered with ActiveAdmin in webpacker mode. So i had to run ActiveAdmin with Sprockets, which is the default, and the error was gone.

See this issue from the applications GitHub: https://github.com/codevise/pageflow/issues/2098#issuecomment-2069653752

Thanks to everyone that helped.