Failed to execute 'querySelector' on 'Element': '/navbarSupportedContent' is not a valid selector.

[anirudh-hegde]

This is the React-JS code:

import React from 'react'

export default function About() {

return (
    <div className="container">

        <div className="accordion" id="accordionExample">
            <div className="accordion-item">
                <h2 className="accordion-header">
                    <button className="accordion-button" type="button"
                        data-bs-toggle="collapse" data-bs-target="#collapseOne"
                        aria-expanded="true" aria-controls="collapseOne">
                        Accordion Item #1
                    </button>
                </h2>
                <div id="collapseOne" className="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                    <div className="accordion-body">
                        <strong>This is the first item's accordion body.</strong> 
                        It is shown by default, until the collapse plugin adds the 
                        appropriate classNamees that we use to style each element. 
                        These classNamees control the overall appearance, as well as 
                        the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                    </div>
                </div>
            </div>
        </div>
    </div>
);

}

when I run npm start run

When I click on Accordion Item 1

Also I made sure that I have included the Bootstrap JavaScript bundle in my HTML file.

[WOLFRIEND]

I've tried to reproduce this behavior on the clean sandbox with linking Bootstrap via CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

And it works great, I don't have any errors/issues. So, probably you should specify more details and provide sandbox example.

[anirudh-hegde]

Thank you, I am closing this issue.

[Vimall03]

I believe that the error is thrown at the Navbar component. It can be fixed by simply replacing data-bs-target value Replace data-bs-target="/navbarSupportedContent" to data-bs-target="#navbarSupportedContent" Here's the full code: <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

[Shivamrut]

I believe that the error is thrown at the Navbar component. It can be fixed by simply replacing data-bs-target value Replace data-bs-target="/navbarSupportedContent" to data-bs-target="#navbarSupportedContent" Here's the full code: <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

@Vimall03 This works! Thanks, but why does it work?

[Vimall03]

This works because in CSS and JavaScript, IDs are referenced with a # prefix. For instance, an element with id="navbarSupportedContent" is correctly identified as #navbarSupportedContent. Without the #, the selector wouldn't properly recognize the element. Bootstrap’s collapse component relies on the data-bs-target attribute to know which element to show or hide. If the value is incorrect, like /navbarSupportedContent, it can't find the target element, causing the collapse functionality to fail. By setting data-bs-target="#navbarSupportedContent", the button accurately targets the element with that ID, allowing Bootstrap's JavaScript to toggle its visibility as intended.

[Shivamrut]

@Vimall03 Damn I completely forgot about ids!! Well thanks for clearing my doubt. Cheers!!