Bootstrap: Getting error in console for collapse JavaScript plugin

[eqx-devops]

Getting error in console for collapse JavaScript plugin
collapse not working as expected it was working 4 days before
Uncaught TypeError: Cannot read property 'querySelectorAll' of null
version used : https://www.npmjs.com/package/bootstrap/v/4.0.0-alpha.6

URL :https://www.equinox.com/clubs/canada
Click on accordion Bay Street

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[FrankK31]

I am now getting the same error on a basic collapse since going from 4.1.1 to 4.1.2. I'll put up a codepen when I get a chance.

[FrankK31]

I found the issue. The change from 4.1.1 to 4.1.2 no longer allows using data-parent attribute when using collapse. I used the data-parent to remove a currently open element with the new element. Basically I was using accordion logic with the buttons. So removing data-parent takes the 'querySelectorAll' error away but I'll have multiple elements open at once. The below codepen shows the error.

https://codepen.io/anon/pen/rrLBxp?editors=1111

[Johann-S]

Our collapse works well with data-parent see: https://getbootstrap.com/docs/4.1/components/collapse/#accordion-example

In your example, you mis placed your data-parent and your data-parent (#cardButtonGroup) do not exist in the DOM

[Ruffio]

If the cause has been found and it is not a bug then this 'issue' should be closed

[pouyana]

From v4.1.1 to v4.1.2, bootstrap somehow has different behavior toward the data-parent. In v4.1.1 when the id given does not exist in DOM, the collapsible still works. In v4.1.2, It gives the following error:

Uncaught TypeError: Cannot read property 'querySelectorAll' of null
    at Collapse._getParent (bootstrap.js:1310)
    at new Collapse (bootstrap.js:1125)
    at HTMLDivElement.<anonymous> (bootstrap.js:1345)
    at Function.each (jquery.js:354)
    at jQuery.fn.init.each (jquery.js:189)
    at jQuery.fn.init._jQueryInterface [as collapse] (bootstrap.js:1334)
    at HTMLDivElement.<anonymous> (bootstrap.js:1394)
    at Function.each (jquery.js:354)
    at jQuery.fn.init.each (jquery.js:189)
    at HTMLButtonElement.<anonymous> (bootstrap.js:1389)

I think https://github.com/twbs/bootstrap/pull/26630 is responsible, which is reasonable.

Solutions:

1) omit it, When there is no need.
2) Set an existing id as parent.

[Johann-S]

You're right @pouyana, setting an existing id as parent is the solution 😄

[eqx-devops]

Thanks guys I have already fixed this :)

[grayayer]

If you are doing custom inclusion of the bootstrap javascript plugins separately, make sure that that you include util.js before collapse.js.

That's what solved it for me.