bootstrap in app router
Unanswered
Champagne D’Argent posted this in #help-forum
Champagne D’ArgentOP
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.
Any ideas on how to add this js when the page loads, without using 'useEffect' or any hook?
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?
9 Replies
@Champagne D’Argent 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?
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
Champagne D’ArgentOP
I was trying to avoid it!
But will give it a shot
thanks @joulev
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.
Champagne D’ArgentOP
Yep, just read that.
also will i be able to use react-bootstrap with app router pages, since bootstrap uses state?