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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1097閲覧

bootstrap4をwebpackerで導入したが、ハンバーガーメニューが効かない。

ytommy

総合スコア11

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

2グッド

3クリップ

投稿2020/04/15 10:00

前提・実現したいこと

bootstrap4をwebpackerで導入したが、ハンバーガーメニューが効かない。

(環境)
・ruby 2.6.5
・Rails 6.0.2.2
・Windows 10

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

Uncaught TypeError: Cannot convert object to primitive value at RegExp.test (<anonymous>) at HTMLDivElement.<anonymous> (bootstrap.js:1498) at Function.each (jquery.js:325) at jQuery.fn.init.each (jquery.js:165) at jQuery.fn.init._jQueryInterface [as collapse] (bootstrap.js:1492) at HTMLDivElement.<anonymous> (bootstrap.js:1552) at Function.each (jquery.js:325) at jQuery.fn.init.each (jquery.js:165) at HTMLButtonElement.<anonymous> (bootstrap.js:1547) at HTMLDocument.dispatch (jquery.js:4670)

該当のソースコード

#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', Popper: ['popper.js', 'default'] }) ) module.exports = environment
#package.json { "license": "UNLICENSED", "name": "winekeeping", "private": true, "dependencies": { "@babel/preset-react": "^7.9.4", "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.2.2", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "bootstrap": "^4.4.1", "jquery": "^3.5.0", "popper.js": "^1.16.1", "prop-types": "^15.7.2", "rails-erb-loader": "^5.5.2", "raty-js": "^2.9.0", "react": "^16.13.1", "react-dom": "^16.13.1", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.10.3" } }
#javascript/packs/application.js require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require('jquery'); require('raty-js'); const images = require.context('../images', true) import 'bootstrap'; import '../stylesheets/application'; import '../stylesheets/custom'; import '../stylesheets/jquery.raty';

試したこと

Navbarやレスポンシブは効いています。

yudukikun5120, s8_chu👍を押しています

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

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

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

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

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

guest

回答1

0

ベストアンサー

2020-08-26追記: こちら5月にjQuery 3.5.1出てたようなので、下記のコマンドの 3.4.13.5.1 に読み替えていただければと思います。 参考: jQuery 3.5.1 Released: Fixing a Regression | Official jQuery Blog

以下古い情報↓

僕も同じ問題にぶつかり、調べていく過程でこの質問を見つけたので解決方法シェアしますね。
先日リリースされたjQuery 3.5.0で入った破壊的変更により、Bootstrap含むいくつかのライブラリが動かなくなってしまったようです。
jQuery 3.5.1で修正されるようなことが書いてありますが、少し時間がかかるようだったので、一旦jQueryのバージョンを 3.4.1 に戻すことによって対処しました。

以下に手順を記載します。

1. package.json"jquery": "^3.5.0" と書いてある部分を "jquery": "^3.4.1" に変更する。
1. yarn install コマンドを実行する。
1. rails serverwebpack-dev-server を再起動する。
1. ハンバーガーメニューが正しく動作していることを確認する。

ごめんなさい。上記間違いでした。正しくは以下の通りでお願いします。

  1. yarn add jquery@3.4.1 コマンドを実行する。
  2. rails serverwebpack-dev-server を再起動する。
  3. ハンバーガーメニューが正しく動作していることを確認する。

よかったら試してみてください。

参考: bootstrap 4 - Uncaught TypeError: Cannot convert object to primitive value(zone-evergreen.js:171) - Stack Overflow

投稿2020/04/26 10:07

編集2020/08/26 12:55
mktakuya

総合スコア21

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問