Railsアプリでドロップダウンが機能しない(jQueryが読み込まれない？)

実現したいこと

jQueryを読み込ませたいです。
現状、jQueryが読み込まれていないせいかドロップダウン機能やログアウト機能がうまく動きません。

前提

Railsチュートリアル8章に沿ってドロップダウンを実装し、最初は動いていましたが気づいたら動かなくなっていました。
調べるとjQueryに問題がありそうだったのでCDNを用いたらドロップダウンは動いたのですが、今度はDeleteリクエストがGetになってしまい、ログアウトが出来なくなりました。

Railsチュートリアルのコードをコピペしましたが動きません。

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

ブラウザの検証機能で表示したエラー

bootstrap:83 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Caching has already been configured with .never or .forever()
    at CacheConfigurator.using (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/config/caching.js:230:13)
    at Object.env (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/config/helpers/config-api.js:27:30)
    at module.exports (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/babel.config.js:4:24)
    at readConfigJS (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/config/files/configuration.js:227:15)
    at readConfigJS.next (<anonymous>)
    at Function.<anonymous> (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/gensync-utils/async.js:25:3)
    at Generator.next (<anonymous>)
    at step (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:261:32)
    at evaluateAsync (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:291:5)
    at Function.errback (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:113:7)
    at errback (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/gensync-utils/async.js:72:18)
    at async (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:188:17)
    at onFirstPause (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/config/caching.js:66:46)
    at cachedFunction.next (<anonymous>)
    at step (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:269:25)
    at evaluateAsync (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:291:5)
    at :3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:44:11
    at Array.forEach (<anonymous>)
    at Function.async (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:43:15)
    at Function.all (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at loadOneConfig (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/config/files/configuration.js:146:37)
    at loadOneConfig.next (<anonymous>)
    at buildRootChain (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/config/config-chain.js:82:51)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig (:3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/config/partial.js:103:62)
    at loadPrivatePartialConfig.next (<anonymous>)
    at :3000/Users/tabataryoya/rails-tutorial/environment/sample_app_local/node_modules/@babel/core/lib/config/partial.js:149:25
    at ./app/javascript/packs/application.js (bootstrap:83:1)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:83:1
    at bootstrap:83:1

ログアウトしようとすると、DeleteリクエストのはずがGetリクエストになりエラーが発生する。

該当のソースコード

routes.rb

ruby
1delete '/logout', to: 'sessions#destroy'

application.html.erb

ruby
1<head>
2  <title><%= full_title(yield(:title)) %></title>
3  <%= csrf_meta_tags %>
4  <%= csp_meta_tag %>
5  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
6  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 
7</head>

view

ruby
1<li class="dropdown">
2  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
3    Account <b class="caret"></b>
4  </a>
5  <ul class="dropdown-menu">
6    <li><%= link_to "Profile", current_user %></li>
7    <li><%= link_to "Settings", edit_user_path(current_user) %></li>
8    <li class="divider"></li>
9    <li>
10      <%= link_to "Log out", logout_path, data: { method: :delete } %>
11    </li>
12  </ul>
13</li>

Gemfiile

gem 'bootstrap-sass', '3.4.1'

bootstrap、jQueryをインストール

$ yarn add jquery@3.4.1 bootstrap@3.4.1

app/javascript/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
import "bootstrap"

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

試したこと

CDNをapplication.html.erbファイルに記述。これでドロップダウンは動いたのですが、ログアウトは依然出来ませんでした。CDNの順番を入れ替えたりもしましたがダメでした。

ruby
1<head>
2  <title><%= full_title(yield(:title)) %></title>
3  <%= csrf_meta_tags %>
4  <%= csp_meta_tag %>
5  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
6  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 
7  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
8  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
9  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
10</head>

DeleteがGetになるのはrails-ujs有効にするという情報も見ましたが、application.jsファイルですでに有効にしていました。
minitestで以下ログアウトのテストを実行したら、成功しました。

ruby
1  test 'login with valid information followed by logout' do
2    #ログインテスト
3    get login_path
4    assert_template 'sessions/new'
5    post login_path, params: { session: { email:  @user.email, password: 'password'}}
6    assert is_logged_in? 
7    assert_redirected_to @user
8    follow_redirect!
9    assert_template 'users/show'
10    assert_select 'a[href=?]', login_path, count: 0
11    assert_select 'a[href=?]', logout_path
12    assert_select 'a[href=?]', user_path(@user)
13
14    #ログアウトテスト
15    delete logout_path
16    assert_not is_logged_in?
17    assert_redirected_to root_url
18  end

以下のバージョンのノードを切り替えてみました。

lts/erbium -> v12.22.12
lts/gallium -> v16.19.1
lts/hydrogen -> v18.15.0

gem 'jquery-rails'をインストールしました。
関係あるかわかりませんが、途中でrails6.0から6.1にバージョンアップしました。一応rails6.0時点のブランチに戻って試しましたがダメでした。

補足情報

nodeやyarn、webpackの理解が甘く、自分で何かいけないことをしたのかもしれません。なので原因の特定が難しいかもしれないのですが、分かる方がいましたら教えていただけると嬉しいです。

実行環境

rails 6.1
ruby 3.1.1

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！