bootstrap in app router

[hexed hearth]

I was able to add the bootstrap js to my page using 'useEffect' BUT now I'm using the app router exclusively for my pages and can't use any hooks since they are client.

useEffect(() => {
    require("bootstrap/dist/js/bootstrap.bundle.min.js");
}, []);

Any ideas on how to add this js when the page loads, without using 'useEffect' or any hook?

[astral rampart]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[rough loom]

use react-bootstrap https://react-bootstrap.github.io/

as per the official recommendation https://getbootstrap.com/docs/5.3/getting-started/javascript/#usage-with-javascript-frameworks

[hexed hearth]

I was trying to avoid it!

But will give it a shot

thanks @rough loom

[rough loom]

you gotta use what is officially recommended; quoting the official documentation:

the Bootstrap JavaScript is not fully compatible with JavaScript frameworks like React, Vue, and Angular which assume full knowledge of the DOM. Both Bootstrap and the framework may attempt to mutate the same DOM element, resulting in bugs like dropdowns that are stuck in the “open” position.

[hexed hearth]

Yep, just read that.

also will i be able to use react-bootstrap with app router pages, since bootstrap uses state?