Netlify defer scripts GET error | Astro Lounge | Page 1

crystal flower Aug 24, 2024, 2:48 AM

#

Hey guys, I have a weird bug on my site when I deploy my Astro site to Netlify. When I use npm run dev, all of my site's JS works.

But when I deploy my site to Netlify through GitHub, my site's JS references which do not use the defer attribute are loading perfectly fine.

However, the ones that have the defer attribute fail to load on the deployed site! They have the following error:

GET[https://www.alieninsectbass.com/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js](https://www.alieninsectbass.com/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js "https://www.alieninsectbass.com/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js")[HTTP/2 404 9ms]  

GET[https://www.alieninsectbass.com/src/scripts/tooltips.js](https://www.alieninsectbass.com/src/scripts/tooltips.js "https://www.alieninsectbass.com/src/scripts/tooltips.js")[HTTP/2 404 9ms]  

GET[https://www.alieninsectbass.com/src/scripts/searchfunctions.js](https://www.alieninsectbass.com/src/scripts/searchfunctions.js "https://www.alieninsectbass.com/src/scripts/searchfunctions.js")[HTTP/2 404 9ms]

I need the defer attributes on those three scripts because otherwise my code throws a vite error that causes my entire site to crash.

Can someone help me fix this?

crystal flower Aug 25, 2024, 4:49 AM

#

Please I need help on this D; I removed the defer attributes from the tooltip.js and searchfunctions.js, but I could not remove it from the bootstrap script link otherwise I got an error

warm tartan Aug 25, 2024, 4:15 PM

#

Is it at all possible for you to share your code publicly? Through github or the like? If not that's fine, my initial guess is though that bootstrap is to blame.

crystal flower Aug 25, 2024, 4:19 PM

#

warm tartan Is it at all possible for you to share your code publicly? Through github or the...

I can share Layout.astro with you if you like. Bootstrap is key for my website so I need to find a way to make the defer attribute work

warm tartan Aug 25, 2024, 4:20 PM

#

I think what might be happening is that bootstrap isn't being built properly as it doesn't seem to exist, hence the 404 error. Let me see your Layout, for clarity and also your build script.

crystal flower Aug 25, 2024, 4:20 PM

#

Ok one sec gimme a little bit currently in a meeting, will get back to you

warm tartan Aug 25, 2024, 4:21 PM

#

Take your time 😉

#

When you get a chance to get to this, do me a favor and run a build as well and provide the output of the build and see if those files physically exist in those locations.

#

I can't believe I didn't see this initially but it appears that the paths are wrong too. Every reference should be scoped to the dist directory, so instead of...

GET[https://www.alieninsectbass.com/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js](https://www.alieninsectbass.com/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js "https://www.alieninsectbass.com/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js")[HTTP/2 404 9ms]

it should be...

GET[https://www.alieninsectbass.com/js/bootstrap.bundle.min.js](https://www.alieninsectbass.com/js/bootstrap.bundle.min.js "https://www.alieninsectbass.com/js/bootstrap.bundle.min.js")[HTTP/2 404 9ms]

At least I think this is right, another opinion would be helpful, I've just started with this framework.

crystal flower Aug 25, 2024, 4:40 PM

#

OOF let me try this out! Still in a meeting but if this is correct you're a lifesaver! 🍬

crystal flower Aug 26, 2024, 2:36 AM

#

warm tartan I can't believe I didn't see this initially but it appears that the paths are wr...

Here is the script tag in question, it's in /src/layouts/Layout.astro:

<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" type="module" defer></script>

#

I tried your suggestion of changing the script tag and it didn't work

crystal flower Aug 26, 2024, 2:48 AM

#

warm tartan When you get a chance to get to this, do me a favor and run a build as well and ...

How do I do this?

#

nvm npm run build

#

No errors when running the build

crystal flower Aug 26, 2024, 3:17 AM

#

FIXED IT! I added the following line to the code inside the top --- ---:

import bootstrap from "bootstrap/dist/js/bootstrap.bundle.min.js?url";

...and changed the script to:

<script src={bootstrap} defer></script>

#

This fixed my issues. Folks, if you want to import Bootstrap via NPM to an Astro project, this is the way to do it!

warm tartan Aug 27, 2024, 4:09 PM

#

I'm glad you got there and sorry I dissapeared for a couple days, I'm in the middle of a move.

#Netlify defer scripts GET error