10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Bootstrapのハンバーガーメニューが動作しない (Uncaught TypeError: Cannot convert object to primitive value)

Last updated at Posted at 2020-04-26

はじめに

Bootstrapのナビゲーションバーを使用して作成した、ハンバーガーメニューがトグルスイッチをクリックしても動作しませんでした。
はじめ、自分のBootstrapに関するコーディングミスかと思い、調査したのですが、結果2020年4月10日に3.5.0にアップデートされたjqueryが原因でした。

環境

  • rails 6.0.2.2
  • bootstrap 4.4.1
  • jquery 3.5.0

現象

bootstrapのナビゲーションバーを使用して作成した、ハンバーガメニューがクリックしても動作しない。
ハンバーガーメニューを押下した際、chrome検証ツールのコンソールに、以下のエラーが出力されている。

bootstrap.js:1498 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)
(anonymous) @ bootstrap.js:1498
each @ jquery.js:325
each @ jquery.js:165
_jQueryInterface @ bootstrap.js:1492
(anonymous) @ bootstrap.js:1552
each @ jquery.js:325
each @ jquery.js:165
(anonymous) @ bootstrap.js:1547
dispatch @ jquery.js:4670
elemData.handle @ jquery.js:4490

原因

2020/4/10にアップデートされたjquery 3.5.0に伴い顕在化したbootstrapの不具合(と想定。私もはっきりとは読み取れず)

対処方法

現状の対処

jqueryを3.5.0から3.4.1にダウングレードする
→ ハンバーガメニューが動作することを確認。

将来的な対応

根本的な修正はBootstrap 4.4.2版で適用される模様(すでにgithub上では、修正版がcommit&mergeされていました)

参考

Bootstrap data-toggle for collapse failing · Issue #2147 · LD4P/sinopia_editor

Bootstrap v4.4.1 collapse doesn't work with jQuery v3.5.0 · Issue #30553 · twbs/bootstrap

追記

2020/5/4にjqueryのv3.5.1が公開され、v3.5.1を使用することで上記不具合は解消されました。

10
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?