Q&A前提
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件
0
自己解決
色々試したりしているうちに、なぜか解決しました。
コードも変更したりして試行錯誤しましたが、最終的にはそのまま(チュートリアル通り)で動きました。
今思い返すと、jQueryを導入する前後で同じタブで実行していました。それを違うタブで開いた時にうまく行ったと思います。
エラー内容を見ると「Error: Caching has already...」と書いてあったので、ブラウザのキャッシュに原因があり、一度そのキャッシュを初期化するような処置が必要だったのでは？と考えます。
曖昧な回答ですみません。お騒がせしました。
投稿2023/01/22 02:01
編集2023/01/22 02:06
総合スコア3
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。