環境

macOS Monterey 12.３.1
Ruby 3.1.2
Bundler 2.3.10
Rails 6.1.4.7

jQueryインストール

まずはjQueryをインストールしていきます。
rails5以前はjquery-railsというGemをインストールするのが
主流のようですが
webpacker管理するには
yarnコマンドを使用しないといけないので、
yarnを使用してjQueryをインストールしていきます。

$yarn add jquery
yarn add v1.22.18
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ jquery@3.6.0
info All dependencies
└─ jquery@3.6.0
✨  Done in 1.72s.

インストールできました。

webpackerの設定とjQueryの呼び出し

Webpackの設定ファイルでjQueryを管理下として認定します。

app/config/webpack/environment.js

const { environment } = require('@rails/webpacker')
// ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
//ここまでを追加
module.exports = environment

続いて
application.jsでjQueryを呼び出します。

app/javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
Turbolinks.start()
ActiveStorage.start()
require('jquery')  //追加

以上でjQueryを使える環境が整いました。

参考