Help with "Tried to use templateContent too early" issue

[cfjedimaster]

I've got an old Jamstack site I'm migrating to Eleventy. It has a large collection of EJS files that do not have metadata. So for example, no title. But, for every file, the content begins with:

<h3>title</h3>

So I thought I'd build a collection based on the initial collection. I'd loop over every item, look at the template content, and just parse out the first h3. Kinda like so:

	eleventyConfig.addCollection("entriesBetter", function(collectionApi) {
		return collectionApi.getFilteredByTag("entries").map(i => {
			console.log('in map');
			console.log(i.url);
			console.log(i.templateContent);
		});
	});

But doing so gives me the error about using the templateContent "too early". Is there a workaround for this?

[pdehaan]

@cfjedimaster How about something like this?

eleventyConfig.addCollection("entriesBetter", function(collectionApi) {
  const posts = [...collectionApi.getFilteredByTag("entries")];
  return posts.map(post => {
    const content = post.template.frontMatter?.content.trim();
    // TODO: Probably do a check to confirm there isn't an existing `title` that we're overwriting here?
    post.data.title = content.split("\n")[0];
    return post;
  });
});

A bit clumsy, but seemed to work for my simplified local test case.
Not sure it's the finest solution. I think it's more of a data problem and might be easier to just fix the input files directly instead of trying to re-re-reprocess them each build. But that's a whole different challenge.

[cfjedimaster]

Where does template come from? I don't think I've seen that documented as part of the collection values.

[pdehaan]

🤷 I just used Node's util.inspect() method on your i instance and poked it with a stick until it worked.
My very ignorant understanding is that the info is coming in via https://www.npmjs.com/package/gray-matter (which parses the template's YAML/JSON frontmatter).

[cfjedimaster]

I'm always hesitate to use something that may work but isn't documented. ;)

[pdehaan]

Sorry, I got distracted by something else, but I also had this idea which uses cheerio to parse the template's content and pull out an H3 tag (bonus: it also checks whether post.data.title already exists before clobbering it):

const cheerio = require("cheerio"); // npm i cheerio -S

...

eleventyConfig.addCollection("entriesBetter", function(collectionApi) {
  const posts = [...collectionApi.getFilteredByTag("entries")];
  return posts.map(post => {
    if (!post.data.title) {
      const content = post.template.frontMatter?.content.trim();
      const $ = cheerio.load(content);
      post.data.title = $("h3").first().text();
      if (!post.data.title) {
        // Display a console warning if we weren't able to find an `<h3>` in the input file.
        console.warn(`Unable to find "title" for ${post.inputPath}`);
      }
    }
    return post;
  });
});

[cfjedimaster]

Love me some cheerio.

[pdehaan]

Correction, probably something closer to this. I was seeing issues w/ multiple H3 tags and it just concatenated all the H3 titles together (unless I used .first()):

post.data.title = $("h3").first().text();

I'll update the answer above for future travellers.

[pdehaan]

Back to my original idea… I wonder if you could write a custom script [outside of Eleventy] which would:

1. glob all your files using fast-glob (or something similar, but this is what Eleventy uses).
2. use gray-matter (the library that Eleventy uses to parse frontmatter+content)
3. use cheerio to find first <h3> tag if the title wasn't specified trick.
4. write out the file again using https://github.com/jonschlinkert/gray-matter#stringify

That way all your EJS templates would be fixed and have the expected frontmatter without needing to do expensive cheerio lookups on each build/deploy.

[pdehaan]

But fixes the input files at once, and doesn't rely on semi-undocumented properties.
If I get some time tomorrow I might take a look at it. Seems like it could be useful for bulk injecting properties into templates.

Only other idea is somehow seeing if you could use eleventyComputed to fetch the <h3> from a template, but that sounds like some questionable performance footguns waiting to happen.

[pdehaan]

const fs = require("fs/promises");

const cheerio = require("cheerio");
const glob = require("fast-glob");
const matter = require("gray-matter");

main("./src/pages/**/*.njk");

async function main(fileGlob) {
  // Loop over all files which match our input file glob.
  for (const file of await glob(fileGlob)) {
    // Parse the frontmatter+content from the input file.
    const { data, content } = matter.read(file);
    if (!data.title) {
      // If the `title` property wasn't already defined, load the page contents via cheerio.
      const $ = cheerio.load(content);
      // Get the text content of the first `<h3>` tag.
      const title = $("h3").first().text().trim();
      if (title) {
        // If we found an `<h3>` tag, set the `title` frontmatter and write the file back to disk.
        data.title = title;
        await fs.writeFile(file, matter.stringify(content, data));
      } else {
        // Couldn't find a `title` property or an `<h3>` log something to the console.
        console.warn(`Unable to find "title" in ${file}`);
      }
    }
  }
}

[pdehaan]

I don't like it, but here's an eleventyComputed version too; since I was curious:

const cheerio = require("cheerio");
const matter = require("gray-matter");

module.exports = {
  eleventyComputed: {
    title(data) {
      // TODO: Check if `title` is already defined and exit early?
      // HACK: Re-process the file w/ gray-matter to get the page contents so we can scrape w/ cheerio.
      // I couldn't find anywhere in the `eleventyComputed` data which had a reference to the current
      // `template` or `templateContent`.
      const file = matter.read(data.page.inputPath);
      const $ = cheerio.load(file.content);
      return $("h3").first().text();
    }
  }
};

[cfjedimaster]

These are all good workarounds - and I appreciate them - but I'd like to focus on the original issue, or expectation at least. In .eleventy.js, when working with collections, should we expect templateContent to properly exist? If not, why?

[vogelino]

I'm facing the same issue here. I am attempting to access the content of the next element in my collection to be able to access its contents (eg. show a link with an image and the title of the next page). How would I go about achieving this. I thought to extend my collection, but at this time the frontmatter/content isn't fully parsed yet:

  // Module collection (custom sort by fileSlug)
  eleventyConfig.addCollection("sortedModules", function (collectionApi) {
    const allModules = collectionApi.getFilteredByTag("module");
    const sortedModules = allModules
      .sort((a, b) => {
        return a.fileSlug - b.fileSlug;
      })
      .map((module, idx) => {
        const nextModule = allModules[(idx + 1) % allModules.length];
        return {
          ...module,
          next_module: nextModule,
        };
      });
    return sortedModules;
  });

Does anyone have an idea how to achieve this. Is this the wrong mindset?

[vogelino]

Apparently, eleventyComputed is the way to go! I could make it work by adding a file in my modules directory called modules.11tydata.js with the following contents:

module.exports = {
  eleventyComputed: {
    next_module: (data) => {
      const modules = data.collections.sortedModules;
      const currentIndex = modules.findIndex(
        (module) => module.fileSlug === data.page.fileSlug
      );
      const nextIndex =
        currentIndex + 1 >= modules.length ? 0 : currentIndex + 1;
      const nextModule = modules[nextIndex];
      if (!nextModule) return;
      const newNext = {
        url: nextModule.data.page.url,
        fileSlug: nextModule.data.page.fileSlug,
        ...nextModule.data,
      };
      return newNext;
    },
  },
};

[nhoizey]

I am attempting to access the content of the next element in my collection to be able to access its contents

Would this be the good answer to your need?

https://www.11ty.dev/docs/filters/collection-items/

[vogelino]

Amazing @nhoizey. That seems like a really good alternative! Thx

[cfjedimaster]

Still hoping though we can find a proper answer to the original issue. :)

[pdehaan]

Here's another unwanted workaround, just to throw a log onto a fire. (LOL)

const {inspect} = require("node:util");

module.exports = function (eleventyConfig) {
  eleventyConfig.addCollection("entriesBetter", function(collectionApi) {
    return collectionApi.getFilteredByTag("entries").map(i => {
      // Hack for https://github.com/11ty/eleventy/blob/d1f48f77462d09d8b77ddcf0bbaa7faffb306e51/src/Template.js#L708-L710
      i.checkTemplateContent = false;
      console.log(i.templateContent); // undefined

      // Only other place I immediately saw in my copious debugging output that had my h3 tag content.
      const content = i.template.frontMatter.content;
      const h3 = content.match(/<h3>(.*?)<\/h3>/i);
      const heading = h3 ? h3[1] : "nO HeAdInG FoUnD";
      console.log(heading);

      // console.log(inspect(i, {sorted:true, depth:8}));
      return i;
    });
  });

  return {
    dir: {
      input: "src",
      output: "www",
    }
  };
};

Kind of a trash fire answer/solution, but did bring up some interesting things…

The real gem was if I hacked that checkTemplateContent = false I was able to trick the internals into bypassing a check/guard and after all that debuggery i.templateContent was undefined at this stage of the parsing anyways (which explains why the cleverer than me (by like a lot) @zachleat probably has that check in place to make sure you aren't trying to access the template content too early.

I can inspect the page's early content via template.frontMatter.content. I think this is coming from the front matter parser, gray-matter. So the downside here was initially I was setting my <h3> content via some front matter variables <h3>{{ title }}</h3> and gray-matter will just return those raw strings before the full data cascade and everything else. So this solution definitely won't work in a majority of cases.

The rest of my shame lies in the RegExp parsing to pluck an <h3> tag. You could use something better like cheerio (see above for examples, apparently I looked at cheerio earlier), although that doesn't come at a zero performance cost, so watch out if you are doing oodles of DOM parsing to pull specific elements for each page.

Maybe in an ideal world that <h3>title</h3> title would be set in front-matter to make it easier to inspect, although not very helpful on a blog w/ 10k+ entries.

[rvantonisse]

Hi there,

Came across the same thing; "Tried to use templateContent too early". I was creating a modified collection where I only pass the required data, of which templateContent is one of.

I "fixed" this, by wrapping calling templateContent inside a function, like so:

            return {
                content: function () { return item.templateContent },
                // Other front matter data
            };

Calling it inside the template like:

{{ item.content() | safe }}

Applied to your example, @cfjedimaster, would then look like this:

	eleventyConfig.addCollection("entriesBetter", function(collectionApi) {
		return collectionApi.getFilteredByTag("entries").map(i => {
		        return {
		                content: function () { return i.templateContent; }
		        };
		});
	});

Hope it helps!

[rvantonisse]

Looking a bit better on what is asked, I wonder if it wouldn't be faster to write a formatter or scraping script instead to add the frontmatter data to the top of those files?

[rvantonisse]

Outside of the eleventy environment that is, like a nodejs or bash script.