Problem linking a JS file to a HTML file using Eleventy/11ty? Currently getting 'GET net::ERR_ABORTED 404 (Not Found)'

Question

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!

Answer 1

I believe that the problem isn't with your HTML <script> tag, but with Eleventy not copying the js file into your _site directory.

In your .eleventy.js config, you're copying src/js into your output folder, but your carousel.js file is not in a js folder. You can fix this by adding

eleventyConfig.addPassthroughCopy("src/carousel.js")

to your config, or by placing your carousel file in src/js, and updating your script tag to

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

Either of these solutions should work.

Answer 2

You have to capture the js file, like this:

// Nunjucks template file

<script>
{% include "js/show-tooltip.js" %}
</script>

Alternatively you can just write your js code between the script tags directly.

If you want to minify also see 11ty documentation here: https://www.11ty.dev/docs/quicktips/inline-js/

All the best!