Uncaught ReferenceError: jQuery is not defined　について

前提・実現したいこと

Uncaught ReferenceError: jQuery is not definedのエラーを解決したいです。

既存のRailsアプリ(完成形)にVueを追加しようとしています。その際、Wevpackやcocoonなど必要なモジュールをyarnでインストールしていたところ、上記のエラーが発生しました。調べたところjQueryの読み込みが上手くいっていないと思い、yarn add jqueryでインストールしたり色々と試してみましたが解決できていません。ちなみにですが冒頭に記載の通り、アプリは完成形なのでjQueryを使用した機能（sliderやプレビュー）等が既にいくつかあります。なので、既存のjQueryの機能を残しつつ、ページを分けてVueを使えたらベストと考えています。

発生している問題・エラーメッセージ

エラーに記載されているように
①途中からインストールしたcocoonとjqueryがうまく読み込めていない。
②既存のbootstrapも同様に読み込めていない。と考えています。

console
1Uncaught ReferenceError: jQuery is not defined
2    at Object../node_modules/cocoon/app/assets/javascripts/cocoon.js (cocoon.js:115)
3    at __webpack_require__ (bootstrap:19)
4    at Module../app/javascript/packs/application.js (application.js:1)
5    at __webpack_require__ (bootstrap:19)
6    at bootstrap:83
7    at bootstrap:83
8./node_modules/cocoon/app/assets/javascripts/cocoon.js @ cocoon.js:115
9__webpack_require__ @ bootstrap:19
10./app/javascript/packs/application.js @ application.js:1
11__webpack_require__ @ bootstrap:19
12(anonymous) @ bootstrap:83
13(anonymous) @ bootstrap:83

該当のソースコード

app> assets> javascripts> application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require rails-ujs
//= require activestorage
//= require jquery.bgswitcher
//= require jquery.raty.js
//= require moment
//= require moment/ja.js
//= require tempusdominus-bootstrap-4.js
//= require bootstrap
//= require cocoon
//= require_tree

window.onpageshow = function(event) {
  if (
         event.persisted
      || window.performance && window.performance.navigation.type == 2
  ) {
      window.location.reload(true);
  }
    /*global $*/
    $('#tab-target-1').tab('show');

    $('.bg-slider').bgSwitcher({
      images: ['img/camp_image.10.jpg','img/camp_image.11.jpg','img/camp_image.12.jpg'],
    });

    $(document).ready(function () {
      $("#slider").skippr({
        transition : 'slide',
        speed : 1000,
        easing : 'easeOutQuart',
        navType : 'block',
        childrenElementType : 'div',
        arrows : true,
        autoPlay : true,
        autoPlayDuration : 3000,
        keyboardOnAlways : true,
        hidePrevious : false
      });

    $('#post_image').on('change', function (e) {
      var reader = new FileReader();
      reader.onload = function (e) {
          $("#preview").attr('src', e.target.result);
      };
      reader.readAsDataURL(e.target.files[0]);
    });

     /*global moment*/
     $('.datepicker').datetimepicker({
      format: 'YYYY-MM-DD HH:mm',
      minDate: moment(),
      enabledHours: [15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
    });

    $('select').change(function () {
      var selectedValue = $(this).val();
      if (selectedValue === '１泊２日') {
        const changedfee = Number($('#fee')[0].innerText.replace('¥', '')) / 2;
        $('#fee')[0].innerText = `¥${changedfee}`;
      } else if(selectedValue === '２泊３日') {
        const changedfee = Number($('#fee')[0].innerText.replace('¥', '')) * 2;
        $('#fee')[0].innerText = `¥${changedfee}`;
      }
    });

    $('select').change(function () {
      var selectedValue = $(this).val();
      if (selectedValue === '１泊２日') {
        const changedfee = Number($('#total_fee')[0].innerText.replace('¥', '')) / 2;
        $('#total_fee')[0].innerText = `¥${changedfee}`;
      } else if(selectedValue === '２泊３日') {
        const changedfee = Number($('#total_fee')[0].innerText.replace('¥', '')) * 2;
        $('#total_fee')[0].innerText = `¥${changedfee}`;
      }
    });
  });
};

app> javascript> packs> application.js 

require("@rails/ujs").start()
require('jquery')

import "bootstrap"
import "cocoon"

packagejson
1{
2  "name": "Beginners_Camp",
3  "private": true,
4  "dependencies": {
5    "@rails/ujs": "^6.1.4-1",
6    "@rails/webpacker": "5.4.2",
7    "axios": "^0.21.4",
8    "bootstrap": "^5.1.1",
9    "cocoon": "github:nathanvda/cocoon#c24ba53",
10    "jquery": "^3.6.0",
11    "rails-ujs": "^5.2.6",
12    "vue": "^2.6.14",
13    "vue-loader": "^15.9.8",
14    "vue-template-compiler": "^2.6.14",
15    "webpack": "^5.52.0",
16    "webpack-cli": "^3.3.12"
17  }
18}

試したこと

yarn addで jquery、bootstrap、rails/ujsのインストール
またエラーメッセージを調べたところ、application.jsでなるべく早くjqueryを読み込ませた方がエラーが出ないと知り、jqueryを早く読み込むようコードを修正しました。
また、Rails6ではありますが記事を参考にしてenvironment.jsに追記もしてみましたが以前解決できていません。
参考記事　https://techtechmedia.com/jquery-webpacker-rails/

app> assets> javascripts> application.js

//= require jquery
//= require rails-ujs
//= require activestorage
//= require jquery.bgswitcher
//= require jquery.raty.js
//= require moment
//= require moment/ja.js
//= require tempusdominus-bootstrap-4.js
//= require bootstrap
//= require cocoon
//= require_tree

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'
//     })
// )

const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
module.exports = environment