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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

974閲覧

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

keroropper

総合スコア3

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2023/01/21 10:36

編集2023/01/21 13:15

前提

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:83の箇所ーーーー 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周辺でエラーが起きていることはなんとなくわかるのですが、そこから先の対処法がわかりません。現段階では本書通りに実装していきたいと思っています。
分かる方がいらっしゃいましたら教えていただけると嬉しいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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

投稿2023/01/22 02:01

編集2023/01/22 02:06
keroropper

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問