I'm creating a site using an SSG (11ty) and I'm having issues adding an external js file to my html. I've tried placing my tag in a few different places within my html, but I receive the below error every time I check the console log:

'GET net::ERR_ABORTED 404 (Not Found)'

In a regular html file I would link to my js file by putting the script tag at the bottom of the body. However as I'm using 11ty to template my pages, the bottom of the body is actually in a separate nunjucks (.njk) file.

I've tried putting the tag at the bottom of the html file, but when my code is served with 11ty the tag appears above the footer inherited from the layout.njk file. I've also tried writing the script tag at the bottom of the body in the .njk file, but in every instance I get the same error.

Does anyone know why I am receiving this error message and where the correct place is to include my tag?

Here is my file structure:

src
|-- _includes
|  |-- layout.njk
|-- carousel.js
|-- gallery.html    

This is the bottom of the body of my layout.njk template file:

        <script src="carousel.js"></script> 
    </body>     
</html> 

This is the front matter from my gallery.html file:

---
layout: layout.njk
title: The Gallery
---

This is the bottom of my gallery.html file:

        </div>

    </div>    

<script src="carousel.js"></script>

This is my .eleventy.js config file:

module.exports = function (eleventyConfig) {
    eleventyConfig.addPassthroughCopy("./src/js");
    eleventyConfig.addPassthroughCopy("src/img");
    eleventyConfig.addPassthroughCopy("src/css");
    return {
        dir: {
            input: "src",
            layouts: "_includes",
        },
    };
};   

Thanks!