Not able to get the interactive elements working from 3rd party UI library (Flowbite)

Question

I'm using Svelte (not kit) and trying to use Flowbite.js (not flowbite-svelte) with it.

When I use, for example, a dropdown from Flowbite in Navbar, it toggles properly on the first page load but when the component is switched (via router), the toggling doesn't work anymore.

I'm using Flowbite via CDN (https://flowbite.com/docs/getting-started/quickstart/#include-via-cdn) and added the JS file before the end of the body tag as instructed.

When checking the console, no error shows up.

However when I tried to save the JS file and manually import it my App.svelte and then the below error popped up:

"Cannot read properties of null (reading 'classList')".

Which makes me think that it's not able to read the buttons/dropdowns.

<div type="button" id="menu-dropdownButton" data-dropdown-toggle="menu-dropdown">
   <span>Menu</span>
</div>


<div id="menu-dropdown">
    <ul aria-labelledby="menu-dropdownButton">
        <li>
            <span type="button" data-drawer-target="drawer-right" data-drawer-show="drawer-right" data-drawer-placement="right" aria-controls="drawer-right">Settings</span>
        </li>
        <li>
            <span>Overview</span>
        </li>
    </ul>
</div>

When I use Flowbite on a non-svelte website, everything works.

Is there any way to get it working?

I know about flowbite-svelte but I don't want that complications for simple elements. I prefer to use the CDN version.

However when I tried to save the JS file and manually import it my App.svelte and then the below error pops up:

"Cannot read properties of null (reading 'classList')".