Issue with opening offcanvas in browser

Bootstrap Studio Help
1

Hello.

I’m getting this error when clicking the button that should show the offcanvas in the browser. (It works as it should inside BSS)

Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop')
    at Qn._initializeBackDrop (bootstrap.min.js:6:57093)
    at new Qn (bootstrap.min.js:6:55775)
    at Qn.getOrCreateInstance (bootstrap.min.js:6:7897)
    at HTMLButtonElement.<anonymous> (bootstrap.min.js:6:58016)
    at HTMLDocument.n (bootstrap.min.js:6:4326)
_initializeBackDrop	@	bootstrap.min.js:6
Qn	@	bootstrap.min.js:6
getOrCreateInstance	@	bootstrap.min.js:6
(anonymous)	@	bootstrap.min.js:6
n	@	bootstrap.min.js:6

I don’t understand what is wrong.

Any help is appreciated.

Cheers!

2

Here’s what usually causes this for Offcanvas:

1. Offcanvas element is missing or mis-targeted

Your button might look like this:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#myOffcanvas">
  Open Offcanvas
</button>

Make sure your Offcanvas exists:

<div class="offcanvas offcanvas-start" tabindex="-1" id="myOffcanvas">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Menu</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    Content here
  </div>
</div>

If #myOffcanvas is missing or has a typo, getOrCreateInstance returns undefined, and when Bootstrap tries to read .backdrop, it crashes.

2. Manual initialization without proper config

If you’re doing something like:

const offcanvas = new bootstrap.Offcanvas(document.getElementById('myOffcanvas'));

Then make sure:

const offcanvas = new bootstrap.Offcanvas(document.getElementById('myOffcanvas'), {
  backdrop: true  // defaults to true
});

Otherwise, _initializeBackDrop may fail.

3. Multiple Bootstrap JS files or wrong version

  • Make sure you only include Bootstrap 5 JS, not multiple versions.
  • Offcanvas was introduced in Bootstrap 5; if you include Bootstrap 4 JS, Offcanvas doesn’t exist, leading to undefined errors.

4. DOM not ready when initializing manually

If you try to initialize an Offcanvas before it exists in the DOM, you’ll also get:

Cannot read properties of undefined (reading 'backdrop')

Wrap manual initialization in:

document.addEventListener('DOMContentLoaded', function () {
  const offcanvas = new bootstrap.Offcanvas(document.getElementById('myOffcanvas'));
});

Most common fix:

  • Check that your <div class="offcanvas" ...> exists and has the correct id.
  • If initializing manually, pass a backdrop option or just rely on the default.
  • Ensure only Bootstrap 5 JS is included.
2 Likes