TypeError: Cannot read property 'inputPath' of undefined (via Template render error)

[web-couture-studios]

Hi, 11ty newbie here and I've ran into an issue where I assume the fix is obvious but I've been trying different things for a while now and nothing seems to get it to work.

I've been broadly following this tutorial and I'm trying layout chaining using the blog post pagination example. It did originally work when I initially tried it but, since I made some other config updates, I started getting the following error:

[11ty] 1. Having trouble writing template: "public/blog/blog-post-1/index.html" (via EleventyTemplateError)
[11ty] 2. (./src/_includes/layouts/blogPosts.njk)
[11ty]   Template render error: (C:\Users\User\Documents\11ty\src\_includes\partials\_blogPagination.njk)
[11ty]   TypeError: Cannot read property 'inputPath' of undefined (via Template render error)

I'm stumped why it's not picking up the _'blogPagination.njk' file because the filepath it's referencing seems correct.

This is the directory structure:

/11ty
---- /_includes
---------- /layouts
--------------- base.njk
--------------- blogPosts.njk
---------- /partials
--------------- _navigation.njk
--------------- _blogPagination.njk
-----/assets
-----/blog
---------- blog.json
---------- blog-post-1.md
---------- blog-post-2.md
---------- blog-post-3.md
-----/pages
---------- blog.njk
-----/styles
---- index.njk

This is the 'eleventy.js':

module.exports = function(eleventyConfig) {

  eleventyConfig.addPassthroughCopy("src/styles");
  eleventyConfig.addPassthroughCopy("src/assets");
  eleventyConfig.addPassthroughCopy("src/admin");
  eleventyConfig.addPassthroughCopy("src/redirects");

  // Page sorting
  eleventyConfig.addCollection("page", function(collections) {
    return collections.getFilteredByTag("page").sort(function(a, b) {
      return a.data.order - b.data.order;
    });
  });

   // Shortcodes
   eleventyConfig.addShortcode(
    "headers",
    (title, subtitle) =>
      `<h1>${title}</h1>
        <p>${subtitle}</p>`
  );

  return {
    dir: {
      input: "src",
      output: "public",
      data: "_data",
      includes: "_includes",
      layouts: "_includes/layouts",
    },
    // Allow .html files to contain nunjucks
    htmlTemplateEngine: 'njk',
  };
};

This is the _'blogPagination.njk':

 <!-- _includes/partials/_blogPagination.njk-->
 
 {% set previousBlogPost = collections.blogPost | getPreviousCollectionItem(blogPost) %}
 {% set nextBlogPost = collections.blogPost | getNextCollectionItem(blogPost) %}
 {% if previousBlogPost %}Previous: <a href="{{ previousBlogPost.url }}">{{ previousBlogPost.data.internalTitle }}</a>{% endif %}
 <br>
 {% if nextBlogPost %}Next: <a href="{{ nextBlogPost.url }}">{{ nextBlogPost.data.internalTitle }}</a>{% endif %}

And this is the _'blogPosts.njk':

---
layout: base
---
 
<link rel="stylesheet" type="text/css" href="{{ '/styles/style.css' | url }}">

{{content| safe}}
<br>
{% include "partials/_blogPagination.njk" %}
<br>
<hr>
<a href="/blog">Blog Home</a>

I've tried different variations for the filepath reference, like "/partials/_blogPagination.njk" and "./partials/_blogPagination.njk" and "../_includes/partials/_blogPagination.njk", but I thought what's currently included in the file should be correct as it's showing the correct path in the error.

Any ideas?

[pdehaan]

Does this work? (blogPost => page)

- {% set previousBlogPost = collections.blogPost | getPreviousCollectionItem(blogPost) %}
- {% set nextBlogPost = collections.blogPost | getNextCollectionItem(blogPost) %}
+ {% set previousBlogPost = collections.blogPost | getPreviousCollectionItem(page) %}
+ {% set nextBlogPost = collections.blogPost | getNextCollectionItem(page) %}

[web-couture-studios]

Ah it does work - thank you!

I'm new to the syntax so I'm not too sure why it works (think I need to read up on sets).

Is 'page' a particular keyword or referencing something here? I thought it was similar to a parameter referencing each item in the 'blogPost' collections array, so could theoretically be called anything. Or was the issue that I had the name the same as the collection's name and it needed to be something different? (so 'blogPost' might work here if the collection was called 'blogPosts'?).

[pdehaan]

page is a special Eleventy variable. See https://www.11ty.dev/docs/data-eleventy-supplied/ for details.

[zachleat]

Note also that if you’re using the 2.0 canaries, page is optional on those filters! Noted here: https://www.11ty.dev/docs/filters/collection-items/

[zachleat]

- {% set previousBlogPost = collections.blogPost | getPreviousCollectionItem(blogPost) %}
- {% set nextBlogPost = collections.blogPost | getNextCollectionItem(blogPost) %}
+ {% set previousBlogPost = collections.blogPost | getPreviousCollectionItem %}
+ {% set nextBlogPost = collections.blogPost | getNextCollectionItem %}

[web-couture-studios]

Many thanks, both!