title: Toast not showing up Bootstrap 5 with modules
body: <p>I'm trying to create a website using just Bootstrap 5 and vanilla JS with modules, but I'm having a problem using Bootstrap Toast. I have successfully created the instance, but when I call the function to show, nothing happens.</p>
  <p>I have a module imported that returns this bootstrap element:
  <code>import toast from &quot;../../components/toast/toast.js&quot;;</code></p>
  <p>When I call <code>toast()</code> it returns this HTML element:</p>
  <pre><code>&lt;div aria-atomic=&quot;true&quot; aria-live=&quot;assertive&quot; 
       class=&quot;toast&quot; role=&quot;alert&quot;&gt;
      &lt;div class=&quot;toast-header&quot;&gt;
          &lt;strong class=&quot;me-auto&quot;&gt;Bootstrap&lt;/strong&gt;
          &lt;small&gt;11 mins ago&lt;/small&gt;
          &lt;button aria-label=&quot;Close&quot; class=&quot;btn-close&quot; 
                  data-bs-dismiss=&quot;toast&quot; type=&quot;button&quot;&gt;
          &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;toast-body&quot;&gt;
          Hello, world! This is a toast message.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'm using bootstrap as a module: <code>import { Toast } from '../../plugins/bootstrap-5.0.0-beta1-dist/js/bootstrap.esm.js'</code></p>
  <p>And creating my toast like this:</p>
  <pre><code>    const toastEl = toast();
      const myToast = new Toast(toastEl);
      myToast.show();
  </code></pre>
  <p>In debugging, I can see that my instance 'myToast' returns the following.</p>
  <blockquote>
  <p>Toast {_element: div.toast, _config: {…}, _timeout: null}<em>config:
  {animation: true, autohide: true, delay: 5000}<em>element:
  div.toast_timeout: null__proto</em></em>: BaseComponent</p>
  </blockquote>