railsチュートリアル　ドロップダウンが機能しない

前提

railsチュートリアルに沿って、bootstrapを使用してドロップダウンの実装をしています。
しかし本書通りに実装してもうまく機能しません。
https://railstutorial.jp/chapters/basic_login?version=6.0#cha-basic_login/

実現したいこと

ドロップダウンが機能するようにする。

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

検証機能のconsole

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
./app/javascript/packs/application.js @ bootstrap:83
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

上記のエラーの最下部
./app/javascript/packs/application.js @ bootstrap:83
webpack_require @ bootstrap:19
先のファイル

bootstrap
1
2ーーーー@ bootstrap:19の箇所ーーーー
3 		// Execute the module function
4 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
5
6
7
8
9ーーーー@ bootstrap:８３の箇所ーーーー
10 	return __webpack_require__(__webpack_require__.s = "./app/javascript/packs/application.js");
11

サーバー

[Webpacker] Compiling…
[Webpacker] Compilation failed:
[webpack-cli] TypeError: Cannot read properties of undefined (reading 'getArguments')

該当のソースコード

_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home", root_path %></li>
        <li><%= link_to "Help", help_path %></li>
        <% if logged_in? %>
          <li><%= link_to "Users", '#' %></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= link_to "Profile", current_user %></li>
              <li><%= link_to "Settings", '#' %></li>
              <li class="divider"></li>
              <li>
                <%= link_to "Log out", logout_path, method: :delete %>
              </li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
        <% end %>
      </ul>
    </nav>
  </div>
</header>

javascript/packs/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

package.json

{
  "name": "sample_app",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "^5.4.3",
    "bootstrap": "3.4.1",
    "jquery": "3.4.1",
    "popper.js": "^1.16.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@babel/core": "^7.16.12",
    "webpack-dev-server": "^4.11.1"
  }
}

試したこと

以下、チュートリアルの実装方法です。これに沿って実装しました。
_header.html.erb

<header class="navbar navbar-fixed-top navbar-inverse">
  <div class="container">
    <%= link_to "sample app", root_path, id: "logo" %>
    <nav>
      <ul class="nav navbar-nav navbar-right">
        <li><%= link_to "Home", root_path %></li>
        <li><%= link_to "Help", help_path %></li>
        <% if logged_in? %>
          <li><%= link_to "Users", '#' %></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Account <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><%= link_to "Profile", current_user %></li>
              <li><%= link_to "Settings", '#' %></li>
              <li class="divider"></li>
              <li>
                <%= link_to "Log out", logout_path, method: :delete %>
              </li>
            </ul>
          </li>
        <% else %>
          <li><%= link_to "Log in", login_path %></li>
        <% end %>
      </ul>
    </nav>
  </div>
</header>

ターミナル

$ yarn add jquery@3.4.1 bootstrap@3.4.1

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

javascript/packs/application.js

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

エラーが出てから試したこと
・gem 'jquery-rails'をインストール
・npm install

補足情報（FW/ツールのバージョンなど）

Rails 6.0.6
ruby 3.1.1p18
jquery@3.4.1
bootstrap@3.4.1
バージョンは本書に合わせています。
javascript周辺でエラーが起きていることはなんとなくわかるのですが、そこから先の対処法がわかりません。現段階では本書通りに実装していきたいと思っています。
分かる方がいらっしゃいましたら教えていただけると嬉しいです。

回答1件

自己解決

色々試したりしているうちに、なぜか解決しました。
コードも変更したりして試行錯誤しましたが、最終的にはそのまま(チュートリアル通り)で動きました。
今思い返すと、jQueryを導入する前後で同じタブで実行していました。それを違うタブで開いた時にうまく行ったと思います。
エラー内容を見ると「Error: Caching has already...」と書いてあったので、ブラウザのキャッシュに原因があり、一度そのキャッシュを初期化するような処置が必要だったのでは？と考えます。
曖昧な回答ですみません。お騒がせしました。

投稿2023/01/22 02:01

編集2023/01/22 02:06

keroropper

総合スコア3