Included templates are not being rebuilt

[dan2k3k4]

I'm not sure why my templates included in other templates are not being rebuilt in --watch or --serve mode.

I've compared my .eleventy.js file with the https://github.com/11ty/eleventy-base-blog starter and even copied that file to my setup but still any changes in my src/_includes/components directory would not cause a full rebuild of those templates.

I then setup a eleventy-base-blog project and moved the folders into src directory and updated the .eleventy.js return data object for dir.input to be set to: src. Then created a src/_includes/components/nav.njk file and updated src/_layouts/base.njk to include that sub-template with:

{% include "components/nav.njk" %}

Then ran npm run start which does an eleventy --serve and for that setup it works fine. Whenever I make a change inside nav.njk the browser refreshes and shows the changes.

I'm not sure where else I should be looking for debugging my local project issue, since it does not seem to be related to the .eleventy.js file.

---

FYI: If I quit the --serve process and re-run it, then it does a full rebuild so the changes are reflected, but I want the changes to be there during development and not have to quit and restart the process each time.

[dan2k3k4]

OK I have found the issue, it is in my .eleventy.js file, I have:

// Templating: Nunjucks
const nunjucksEnvironment = new Nunjucks.Environment(
  new Nunjucks.FileSystemLoader(['src/_includes', 'src/assets'])
);
eleventyConfig.setLibrary('njk', nunjucksEnvironment);

If I comment that out and remove the following in my base.njk file (which is the only place where I import something from /src/assets):

{% set js %}
  {% include "js/inline.js" %}
{% endset %}
<script defer>{{ js | jsmin | safe }}</script>

Then the with --serve mode works fine and refreshes/rebuilds the "child-templates".

Now my question is, how do I get the eleventyConfig.setLibrary option to work with multiple directories and still refresh "child-templates"?

[dan2k3k4]

Ah, perhaps I stumbled on the same issue as pointed out in https://github.com/11ty/11ty-website/issues/246

[dan2k3k4]

OK, so the issue is because watch: is not set to true so I changed the code to:

// Templating: Nunjucks
const nunjucksEnvironment = new Nunjucks.Environment(
  new Nunjucks.FileSystemLoader(['src/_includes', 'src/assets'],
  {
    watch: true,
    lstripBlocks: true,
    trimBlocks: true,
  })
);
eleventyConfig.setLibrary('njk', nunjucksEnvironment);

Now my "child" templates are rebuilt in --serve / --watch modes.

[Ryuno-Ki]

Thanks for sharing the steps and solution.

[dan2k3k4]

If your build hangs, it's because watch: is true, so you can do:

// Templating: Nunjucks
  const nunjucksEnvironment = new Nunjucks.Environment(
    new Nunjucks.FileSystemLoader(['src/_includes', 'src/assets'],
    {
      watch: process.env.ELEVENTY_ENV === 'development',
      lstripBlocks: true,
      trimBlocks: true,
    })
  );
  eleventyConfig.setLibrary('njk', nunjucksEnvironment);

Then for your watch or dev scripts in package.json just make sure to set ELEVENTY_DEV=development when you need the templates to refresh on "child" changes.