Mitigate TemplateContentPrematureUseError case introduced in 4.1.1

[noelforte]

While addressing #96 for @uncenter I noticed that builds of their site were throwing TemplateContentPrematureUseError. Becuase it wasn't relevant to that issue I closed it as fixed. Since I now suspect this plugin is indeed the cause of the issue, I'm going to investigate further.

Some to-do's:

• Identify cause
• Implement test case
• Implement fix

Relevant notes:

• Possibly related to upgrade of vento to 1.12.14, although at this time I'm not sure how.
• Need to figure out why TemplateContentPrematureUseError specifically is getting thrown.
• Reference PR chore(deps): update dependency eleventy-plugin-vento to ^4.1.1 - autoclosed uncenter/uncenter.dev#234

[uncenter]

I was looking at this as well when you brought it up yesterday and did some looking- didn't see any immediate solution. I believe you are correct that the issue is coming from the plugin, as the current Vento rewrite is on the same version of Eleventy as my previous Nunjucks setup, and I wasn't seeing the issue there. Thanks again for looking into this!

[noelforte]

Related: 11ty/eleventy#2328

[noelforte]

Also related: 11ty/eleventy#975

[noelforte]

Update: Looks like the issue happened when this plugin moved to vento 1.12.14. I'll check the diff and figure out how to navigate around that since it seems like Eleventy really doesn't like other libraries handling its errors as indicated in that first issue I mentioned...although why this causes Eleventy to crash is beyond me...

[noelforte]

Ok, it gets weirder...never have I ever haha... @uncenter if you've got any ideas on where to go from here, I'm open to suggestions becuase there's definitely something going on that requires hacking around and I'd rather do it cleanly than patch over wierd issues and I definitely don't want to force Oscar to make Vento bend to Eleventy's conventions, particularly when he decided to write Lume instead... 😅

Apparently this commit that removed extending an error message is the problem. I have no idea why not appending something to the error message has anything to do with accessing the template content but just to make sure...

1. I cloned uncenter.dev and installed [email protected]
2. pnpm build
3. Build fails
4. Went to node_modules/.pnpm/[email protected]/node_modules/ventojs/esm/src/errors.js and on line 14, put this back:

   if (cause) {
     this.message += `(via ${cause.name})\n`;
   }

5. pnpm build
6. Build succeeds...?!?! 🤯

If you've got any ideas about where to go next, let me know!

[noelforte]

Strangely, usage of eleventyImport.collections with the collection name doesn't work here either...

---
eleventyImport:
  collections: ["posts"]
---

[uncenter]

Someone opened 11ty/eleventy#3630 as well which I believe is the same issue with the RSS plugin / collections. I'll keep an eye on it.

[noelforte]

Hmm, interesting. I see they posted a workaround as of 12 hours prior to me writing this comment. Can you test and confirm if that corrects the issue? If so then I think this is on Eleventy to fix because otherwise I can't see how this error gets thrown as I showed above.

[uncenter]

Hmm, interesting. I see they posted a workaround as of 12 hours prior to me writing this comment. Can you test and confirm if that corrects the issue? If so then I think this is on Eleventy to fix because otherwise I can't see how this error gets thrown as I showed above.

I don't think it fixes it for me. The error I'm getting when I update eleventy-plugin-vento is:

[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble rendering vto template ./src/generated/feed.xml.vto (via TemplateContentRenderError)
[11ty] 2. Error in template src/generated/feed.xml.vto:1:700
[11ty] 
[11ty] <empty file> (via TemplateError)
[11ty] 
[11ty] Original error stack trace: TemplateError: Error in template src/generated/feed.xml.vto:1:700
[11ty] 
[11ty] <empty file>

I wonder why I'm not getting the TemplateContentPrematureUseError that you (and I think myself as well) were getting before?

-		"eleventy-plugin-vento": "^4.0.1",
+		"eleventy-plugin-vento": "^4.1.1",

[noelforte]

I wonder why I'm not getting the TemplateContentPrematureUseError that you (and I think myself as well) were getting before?

The error reworking we identified in #96 (comment) and implemented in 11ty/eleventy#3572 won't be available until Eleventy 3.0.1 gets released. On 3.0.0 and lower, the details of the error stack are hidden from you.

Try installing @11ty/eleventy@canary or @11ty/[email protected] or later and you'll be able to see that TemplateContentPrematureUseError is in fact getting thrown.

[uncenter]

Ah, right, sorry I forgot I needed to update that as well 😓

[noelforte]

No worries! It definitely has something to do with the removal of the error message in Vento, which makes no sense to me at all. #140 is pending because if I can fix this I'd add it to the release.

Otherwise, I can merge and release ASAP which will update Vento to 1.12.15, which might eliminate it as being the problem.

However, I still think there's some weird logic handling happening in Eleventy regarding error messages and something with Vento is tripping Eleventy up.

[uncenter]

Thanks again for helping my figure out this strange issue! Fwiw I pushed up a branch on my website repository if you need it for testing - I switched over from a custom fork of the RSS plugin to the official one there to try to narrow down possible edge cases (still no luck though, even when trying to rename the posts collection to myPosts as that earlier issue suggested).

EDIT: Silly me, here is that PR: uncenter/uncenter.dev#260

[uncenter]

Ended up just adding a patch for that one line you mentioned earlier for now. uncenter/uncenter.dev@6275dbf

[noelforte]

Cool. I'm going to keep this issue open while I continue to investigate. I have a feeling that modifying the error message somehow tricked Eleventy into proceeding with the build, but again I don't know for sure until I do more tests.

Probably the best way to handle it would be to do some sort of error catching for TemplateContentPrematureUseError and rethrow it to Eleventy unmodified.

At this point, I hate to bother @zachleat, but if anyone would know how errors work and why this issue is what it is, it would be him. Gut feeling is this somehow relates to 11ty/eleventy#2328, so when I get a moment to do more testing I'll update this issue accordingly.

[uncenter]

Fwiw I have two feed templates, one for JSON feed and the other for RSS/ATOM. The JSON feed always works and looks fine in the output directory, but the RSS one fails until I add that patch (and then builds and looks fine in the output directory). The JSON feed template is a JS template file and the RSS feed is in a Vento file.

[noelforte]

@uncenter GOT IT!! The PR above is on the right track: When Eleventy tries to access template content, if the template content hasn't been rendered yet, Eleventy catches the "premature use" error and queues the template for rendering, then tries again after the template has been rendered. It uses this function on the ErrorUtil class to do the detection.

The PR I opened (11ty/eleventy#3572) to introduce checking the Error.cause property in addition to Eleventy's convention of Error.originalError helped get errors from Vento and other libraries properly traced by Eleventy, but didn't account for other areas of the Eleventy codebase where Error.originalError is the only thing used. Because Vento now puts template errors in Error.cause as per convention, Eleventy can't see the premature use error that it has a handler for.

To be honest, I don't know why this sort of functionality is mixed in with error throwing because we end up with cases like this. To reiterate what the issue is:

1. Eleventy asks this plugin to render the template and waits for the render function to be returned.
2. Eleventy calls render function, which in turn asks this plugin to call the render function.
3. The render function contains a reference to content, which when accessed, throws a TemplateContentPrematureUseError
4. Normally this error would be caught by Eleventy, which would then render the missing dependancy content and then try the parent template again, but this doesn't happen.
5. Instead, Vento catches the error and thinks it's an error running the template function (which technically it is), and throws it back to Eleventy with the TemplateContentPrematureUseError assigned as Error.cause
6. Eleventy reads the error from Vento and thinks Vento had a problem rendering the template, so it throws another (misleading) error saying that Vento couldn't render the template.

So TLDR Eleventy blames Vento blames Eleventy waiting for a "premature use error" that was pre-caught. 😮‍💨

It seems like the best way to fix this is to patch Eleventy's error util that I linked above. I don't have time right now to open a PR but might in a day or two. At least now we know where the issue is coming from!

[uncenter]

Wow thanks for the write up, good catch!

[noelforte]

PR was submitted. Once that gets merged this issue can get closed and also a bunch of stuff that was blocked from releasing can go out. Cheers!