Astro with Bootstrap
I was trying to get Bootstrap to work in Astro. So far CSS is working nicely, but JS doesn't want to, gives me this error.
My CSS import is the following:
Then I tried the same with JS:
As seen here: https://i.gyazo.com/83973f434cc7224703d16e1f8f5e526b.png
It says it's trying to solve an issue where
document doesn't exist. But honestly, I don't know how to understand the error, as I went to the file itself, with no luck figuring it out.
Installed bootstrap through npm install bootstrap.
17 Replies
Also, Kevin's video is a bit outdated on the matter, as some of the ways he dealt with things are deprecated š
mmm could be cause you need to opt int for client side JS
document does not exist in node
https://docs.astro.build/en/core-concepts/astro-components/#client-side-scripts
GitHub
V5 Alert: Breaks SSR in Gatsby Ā· Issue #33722 Ā· twbs/bootstrap
Using bootstrap@^5.0.0-beta3 as ES6 modules in React/Gatsby.js In node window and document are undefined. There should be a check for these so they work in similar cases. https://github.com/twbs/bo...
Looks like the easy dirty fix is to just include the CDN in the head of your entry point html
š¤·āāļø
I have them.
But they didn't work š
That's why I tried doing npm.
whats your entry point?
I have not build a astro project in ages, I'm assuming its like
app.htmlI'm adding this in:
Layout.astro.
Pretty much referencing Kevin's video.
On where he linked a
style.css there this way.Assuming you need it in index.html
Or again if you put it in layout you need to run a check
if (browser) then load. From the issues I linked
https://getbootstrap.com/docs/5.2/getting-started/vite/
You could try bringing it via Vite too idk how well that works in AstroI will keep trying solutions.
Thanks for the help.
now it's time to pressure Kevin to do an updated Astro video
Yea tricky one when its not a ESM module
He wouldn't use bootstrap though eh š
Another hacky solution I would try is just copy/pasta the min.js file intp Public and load it as a static asset
That's fine as well, any example or reference works. The problem is deprecated functions š
Ah gotcha
That's what I did 
Unknown Userā¢3y ago
Message Not Public
Sign In & Join Server To View
Import it on the layouts instead of the components.