Bootstrap: Bootstrap v4.4.1 collapse doesn't work with jQuery v3.5.0

[waclaw66]

Hello together,

after upgrade to jQuery 3.5.0 I'm getting an exception
TypeError: Cannot convert object to primitive value
while clicking to navbar-toggler button

It leads to the line
https://github.com/twbs/bootstrap/blob/dca1ab7d877bc4b664b43604657a2b5fbe2b4ecb/js/src/collapse.js#L346

Works fine with jQuery 3.4.1.

Any system and browser.

[xpressabhi]

Not working for me as well, by mistake just created new issue.

[sharkykh]

Same for Bootstrap 3.4.1.
https://github.com/twbs/bootstrap/blob/68b0d231a13201eb14acd3dc84e51543d16e5f7e/js/collapse.js#L176

I think this is due to this change in jQuery, preventing the implicit object -> string conversion.

[alliedarmour]

I have the same problem, in this case my navbar is not working anymore. It surely is the update to 3.5.0 which is causing the problem.

[XhmikosR]

I was actually just going to make a new issue to update jQuery to v3.5.0 in v4-dev.

https://blog.jquery.com/2020/04/10/jquery-3-5-0-released/

I'll check now if we have any failing tests.

[XhmikosR]

https://github.com/jquery/jquery/issues/4665

So, it seems they will make a patch release to fix this behavior.

@Johann-S do you think we should do anything in our code? I don't know when jQuery v4.0.0 will be out, but any fixes we make will probably be future proof.

[XhmikosR]

I was able to reproduce the error after updating to v3.5.0 and adapting our tests in #30559.

[aldyahsn]

For me, the console error says
TypeError: can't convert config to string

[XhmikosR]

After some digging around, it seems this code exists since 2015: https://github.com/twbs/bootstrap/commit/872e56fcf2a7bb1ec936d9e0a5dfed8d31f87590

Let's wait and see what the jQuery developers will say in https://github.com/jquery/jquery/issues/4665

[XhmikosR]

Can someone try https://github.com/twbs/bootstrap/pull/30559?

https://deploy-preview-30559--twbs-bootstrap.netlify.com/docs/4.4/dist/js/bootstrap.js
https://deploy-preview-30559--twbs-bootstrap.netlify.com/docs/4.4/dist/js/bootstrap.min.js
https://deploy-preview-30559--twbs-bootstrap.netlify.com/docs/4.4/dist/js/bootstrap.bundle.js
https://deploy-preview-30559--twbs-bootstrap.netlify.com/docs/4.4/dist/js/bootstrap.bundle.min.js

Our tests seem to pass there. We'll see if/when we can release v4.4.2, but until that happens or until jQuery releases a new patch version people should be careful with the v3.5.0 update.

[sharkykh]

Edit: from what I can tell v3 is EOL, which is unfortunate for me, and so my comment is irrelevant.

@XhmikosR
I can test the change you made on Bootstrap v3.4.1, so I did, and it works.
I hope the plan is to also backport this fix for Bootstrap v3.

I changed line 176 from:

if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false 

to:

if (!data && options.toggle && typeof option === 'string' && /show|hide/.test(option)) options.toggle = false 

and collapse works.
$(element).collapse('show') / $(element).collapse('hide')works as well.

[XhmikosR]

v3 is EOL. I doubt we'll backport this, sorry.

[alazark94]

in node_modules/bootsrap/dist/js/bootstrap.js line 1509 change

if (!data && _config.toggle && /show|hide/.test(config))

to

if (!data && _config.toggle && /show|hide/.test(_config))

or use jquery 3.4.1 until twbs/bootstrap#30553 is fixed

[XhmikosR]

True I had trouble when I tried that but tests were broken due to other
jQuery changes.

I'll try again later in my branch.

On Sun, Apr 12, 2020, 16:50 Alazar Kassahun [e-mail]
wrote:

if (!data && _config.toggle && /show|hide/.test(config))

should be

if (!data && _config.toggle && /show|hide/.test(_config))

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/30553#issuecomment-612617589,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AACVLNM64H276MOT7E33PCLRMHBJVANCNFSM4MF4XAFA
.

[XhmikosR]

Nope, doesn't work because _config is still an Object.

[alazark94]

I've tried it multiple times and it's working for me.

[waclaw66]

_config works for me too in this particular case.

Nope, doesn't work because _config is still an Object.

[nixprosoft]

Same error on popover's init with Bootstrap 3.4.1!

[XhmikosR]

I've tried it multiple times and it's working for me.

Yeah, but our test suite doesn't work.

[XhmikosR]

Everyone interested in this should follow our #30559 PR and the upstream jQuery issue https://github.com/jquery/jquery/issues/4665.

It seems the jQuery developers plan to release a fix for the error that is affecting us, but my plan is to also land #30559 for v4.

[yickson]

Downgrade to Jquery 3.4.1 and work again, thanks.

[ghost]

@yickson isn't work with me.
here's my Dependencies

"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.1"

in my console error

TypeError: can't convert config to string main.js line 120 > eval:1508:52

[yickson]

@yickson isn't work with me.
here's my Dependencies

"bootstrap": "^4.4.1",
"jquery": "^3.4.1",
"popper.js": "^1.16.1"

Bootstrap 4.4.1 Not work with Jquery 3.4.1, unfortunately, I use bootstrap 3.3.7 with Jquery 3.4 by compatibility.

[alazark94]

Change it to
“jquery”: “3.4.1”

Just remove the ‘^’ character

[ghost]

@alazark94 thanks bruh!, work as fine

[JiresAng]

Try to change your v3.5.0 to 3.4.1, downgrade your jQuery

[valentijnscholten]

I have the same issue with popover. With jQuery 3.4.1 it works and the dataAttributes variable is a full javascript object, which has the hasOwnProperty as function. In jQuery 3.5.0 the dataAttributes variable is just a dictionary or whatever I should call it. It has no object functions such as hasOwnProperty.

[nicholastic]

jQuery 3.5.0 also won't work with Bootstrap 3.4.1. Dropdowns and collapse don't work. Reverted to jQuery 3.4.1 to make it work.

[XhmikosR]

Fixed in #30559.

[XhmikosR]

jQuery v3.5.1 was released a few hours ago. This should work with Bootstrap 4.x fine.