42

In Angular 9 (using Bootstrap 4 and Jquery 3.5.1). when clicking on bootstrap collapse button, I am getting an error on my browser console instead of a dropdown menu.

I really don't know where exactly the error came from.

Can't convert object to primitive value(zone-evergreen:171).


Uncaught Type Error: Cannot convert object to primitive value(zone-evergreen.js:171 )
    at RegExp.test (<anonymous>)
    at HTMLDivElement.<anonymous> (bootstrap.bundle.min.js:6)
    at Function.each (jquery.min.js:2)
    at S.fn.init.each (jquery.min.js:2)
    at S.fn.init.a._jQueryInterface [as collapse] (bootstrap.bundle.min.js:6)
    at HTMLDivElement.<anonymous> (bootstrap.bundle.min.js:6)
    at Function.each (jquery.min.js:2)
    at S.fn.init.each (jquery.min.js:2)
    at HTMLButtonElement.<anonymous> (bootstrap.bundle.min.js:6)
    at HTMLDocument.dispatch (jquery.min.js:2)
Sylvernus Akubo
  • 1,487
  • 11
  • 13
Rohit Kumar
  • 549
  • 1
  • 4
  • 6

4 Answers4

107

This issue seems to be related to jQuery 3.5.0. It is a breaking change that affects many plugins. Temporarily reverting to a previous version of jQuery (like 3.4.1) fixed the issue for me.

Source: jQuery Issue #4665

Update:

jQuery 3.5.1 reverts the breaking change and should be safe to use.

Announcement: jQuery 3.5.1 Released: Fixing a Regression

jastend
  • 1,529
  • 1
  • 8
  • 17
  • I have the same issue, and FWIW this suggestion is not working. I was using WordPress which uses some old 1.x version, i swapped out for 3.4.1 and still seeing the issue. I think is related to something rather new as there are very similar posts within the past hour (see https://stackoverflow.com/questions/61176484/how-to-solve-cannot-convert-object-to-primitive-value-error-in-react-application) – matgargano Apr 12 '20 at 21:18
  • I was wrong, nevermind the last comment, I was pulling in 2 versions of jQuery – matgargano Apr 13 '20 at 14:32
  • 9
    In my case, my bootstrap accordion stopped working. That is, clicking on a card header did not open the card. `npm i jquery@3.4.1` fixed my `Cannot convert object to primitive value` problem. – CAK2 Apr 13 '20 at 20:57
  • This answer saved my bacon. Thank you so much! My package,json had "jquery": "^3.2.1". Changing it to "jquery": "3.2.1" solved the problem. – Kirk Liemohn Apr 15 '20 at 05:24
  • Bootstrap documentation also recommends a version of 3.4.1 [documentation](https://getbootstrap.com/docs/4.4/getting-started/introduction/#js). – Algorys Apr 21 '20 at 15:54
  • I am already using "jquery": "^3.4.1" with "bootstrap": "^4.3.1" and bootstrap accordion works fine in my local environment but somehow it is breaking on development environment. And I face same error as shows in question. – KEVAL PANCHAL Apr 28 '20 at 05:43
  • Fixed my problem. Also keep in mind if you use npm, set the version to "3.4.1" (not "^3.4.1" as it will probably hold the old version) then run `npm install`. – Catalin Pirvu Apr 29 '20 at 15:28
  • Ran into this just now with a fresh install of Laravel using the Bootstrap UI components. Setting package.json to ask for jQuery 3.4.1 fixed it. – sifriday May 01 '20 at 16:25
  • btw, it took me a while to find jquery3.4.1... it can be found here: https://code.jquery.com/jquery-3.4.1.min.js and here: https://code.jquery.com/jquery-3.4.1.js (i got them from https://blog.jquery.com/2019/05/01/jquery-3-4-1-triggering-focus-events-in-ie-and-finding-root-elements-in-ios-10/). Oh, and it worked :-) – MrWater May 02 '20 at 14:44
1

They have a fix for that now (see https://github.com/jquery/jquery/commit/65e909844c2d064606217b47e92eff12ebdb79de) if you are up to building your own jquery using node/npm then just download the commit on the link above and build it.

What I did was to edit my jquery.min.js (3.5.0)

Steps I did:

  1. search for the line: return t||(t=Object.create(null) it's in Line 2,Column 32856
  2. replace Object.create(null) with {}

and that's it so far so good

Sybregunne
  • 179
  • 8
0

At today's answer, jquery already fix the issue and you don't have to do any regression.

Just uninstall jquery, install it again and the latest 3.5.1 version, released on 2020-05-04, should fix the problem - for me it did, and I'm also using Angular 9 and BS4*
A beauty - back to normal.

Pedro Ferreira
  • 493
  • 7
  • 14
0

Just found this issue too, so moved from 3.5.0 to 3.5.1 (latest) and error is gone

asotog
  • 225
  • 2
  • 8