Bug with Bootstrap Collapse in combination with Bootstrap Toast - ReactJS

Hi,

I think I may have found a bug between the Bootstrap v5.1.3 collapse feature and Toast-Messages in ReactJS

Setup to replicate the error:

Create a default react project with:

• npx create-react-app collapse-toast-test
• Import boostrap with npm i bootstrap or yarn i bootstrap
• In index.js import bootstrap:

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.js';

1. Use buttons from example: https://getbootstrap.com/docs/5.1/components/collapse/ and paste the code into app.js
2. In app.js import Toast (and make use of it if you want)

import { Toast } from "bootstrap";

Result:

Pressing the buttons only shows the hidden elements. Hide afterwards is not working. So the toggle-feature is bugged.

Used versions:

React-Version: 18.0.0 Bootstrap-Version: 5.1.3

[victory-sokolov]

Another workaround is to import Toast directly from toast.js

import Toast from 'bootstrap/js/dist/toast.js';

[RyanBerliner]

The bug you are seeing has nothing to do with React, and almost nothing to do with bootstrap either. Rather, it’s your improper import of bootstraps javascript. You are explicitly importing bootstrap’s umd file (bundled with popper… but that irrelevant here), then importing the Toast class from bootstraps default path… which in the case of the bundler in create-react-app is going to be the module path, ie bootstraps esm file. This effectively loads certain parts of bootstraps code base twice and you are seeing the effects of this.

So instead of

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.bundle.js';

// and later

import { Toast } from "bootstrap";

You’ll want

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';

// and later

import { Toast } from "bootstrap";

The import 'bootstrap'; is equivalent to import 'bootstrap/dist/js/bootstrap.esm'; in this case - though I would not recommend the long hand import. Use the default and let your bundler decide what kind of files it wants.

Note: You will need to make sure popper is installed as well - as you would no longer be loading the “bootstrap bundle” file that included everything in 1 file.