Improved error messaging for non-function Shortcode Definitions (`callback.call is not a function` error when compiling Nunjucks files in 3.0.0-alpha)

querkmachine commented 2 months ago

Operating system

macOS Sonoma 14.0 (23A339)

Eleventy

3.0.0-alpha.10

Describe the bug

Using Eleventy 3.0.0-alpha.10, my website fails to compile Nunjucks files correctly, returning something akin to the following stack trace when debugging is enabled:

[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble rendering njk template ./src/ash.njk (via TemplateContentRenderError)
  Eleventy:EleventyErrorHandler (error stack): TemplateContentRenderError: Having trouble rendering njk template ./src/ash.njk
  Eleventy:EleventyErrorHandler     at Template._render (file:///Users/kim/Sites/beeps.website/node_modules/@11ty/eleventy/src/TemplateContent.js:594:11)
  Eleventy:EleventyErrorHandler     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  Eleventy:EleventyErrorHandler     at async Template.renderPageEntryWithoutLayout (file:///Users/kim/Sites/beeps.website/node_modules/@11ty/eleventy/src/Template.js:427:25)
  Eleventy:EleventyErrorHandler     at async TemplateMap.populateContentDataInMap (file:///Users/kim/Sites/beeps.website/node_modules/@11ty/eleventy/src/TemplateMap.js:564:7)
  Eleventy:EleventyErrorHandler     at async TemplateMap.cache (file:///Users/kim/Sites/beeps.website/node_modules/@11ty/eleventy/src/TemplateMap.js:470:3)
  Eleventy:EleventyErrorHandler     at async TemplateWriter._createTemplateMap (file:///Users/kim/Sites/beeps.website/node_modules/@11ty/eleventy/src/TemplateWriter.js:324:3)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.generateTemplates (file:///Users/kim/Sites/beeps.website/node_modules/@11ty/eleventy/src/TemplateWriter.js:354:3)
  Eleventy:EleventyErrorHandler     at async TemplateWriter.write (file:///Users/kim/Sites/beeps.website/node_modules/@11ty/eleventy/src/TemplateWriter.js:401:21)
  Eleventy:EleventyErrorHandler     at async Eleventy.executeBuild (file:///Users/kim/Sites/beeps.website/node_modules/@11ty/eleventy/src/Eleventy.js:1268:10) +0ms
[11ty] 2. (./src/ash.njk) [Line 28, Column 3]
[11ty]   TypeError: callback.call is not a function (via Template render error)
  Eleventy:EleventyErrorHandler (error stack): Template render error: (./src/ash.njk) [Line 28, Column 3]
  Eleventy:EleventyErrorHandler   TypeError: callback.call is not a function
  Eleventy:EleventyErrorHandler     at Object._prettifyError (/Users/kim/Sites/beeps.website/node_modules/nunjucks/src/lib.js:32:11)
  Eleventy:EleventyErrorHandler     at /Users/kim/Sites/beeps.website/node_modules/nunjucks/src/environment.js:464:19
  Eleventy:EleventyErrorHandler     at eval (eval at _compile (/Users/kim/Sites/beeps.website/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:164:12)
  Eleventy:EleventyErrorHandler     at b_main (eval at _compile (/Users/kim/Sites/beeps.website/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:94:3)
  Eleventy:EleventyErrorHandler     at eval (eval at _compile (/Users/kim/Sites/beeps.website/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:163:83)
  Eleventy:EleventyErrorHandler     at b_afterMasthead (eval at _compile (/Users/kim/Sites/beeps.website/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:290:1)
  Eleventy:EleventyErrorHandler     at eval (eval at _compile (/Users/kim/Sites/beeps.website/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:159:92)
  Eleventy:EleventyErrorHandler     at eval (eval at _compile (/Users/kim/Sites/beeps.website/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:278:1)
  Eleventy:EleventyErrorHandler     at eval (eval at _compile (/Users/kim/Sites/beeps.website/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:243:1)
  Eleventy:EleventyErrorHandler     at fn (/Users/kim/Sites/beeps.website/node_modules/a-sync-waterfall/index.js:26:24) +0ms

The Nunjucks filename and line/column numbers are frequently changing, and just appear to point to whatever file Eleventy is trying to process first.

The callback.call referenced in the error message appears to be internal to Eleventy.

https://github.com/11ty/eleventy/blob/d30b952ad59e8978b22616797287fbb0fbfb332f/src/Template.js#L471-L480

As far as I've been able to gather:

The line number associated with the Nunjucks file doesn't align with anything obvious, sometimes even landing on empty lines, though that could be because of #3076.
This only appears to affect Nunjucks files with the .njk extension. (My .md files are also processed via Nunjucks, but none of those have returned this error thus far.)
Commenting out or deleting {% block %}s moves where the error is up until a point. It quickly seems to land on a page that lacks one, however.

Notably, the content of this branch is identical with the main branch; except for having Eleventy 3.0.0-alpha.10 installed and the configuration & data files converted to ESM format.

All of the actual Nunjucks and Markdown files are untouched, so the issue would seem to lie in either Eleventy 3.0, the included version of Nunjucks, or some aspect of how I've migrated things.

Reproduction steps

Unfortunately due to the mysterious nature of the issue I was unable to create a reduced example.

Clone the repo and branch from https://github.com/querkmachine/beeps.website/tree/eleventy-esm
Ensure you're using the version of Node specified in the .nvmrc file.
Install the exact npm dependencies with npm ci
Try and build the branch by running npx @11ty/eleventy

Expected behavior

Ideally, things would compile successfully!

If this is an obscure issue buried somewhere in Eleventy 3.0.0, this could be a barrier to upgrading and migration, which is why I'm raising it before it can (potentially) affect anyone else.

Reproduction URL

https://github.com/querkmachine/beeps.website/tree/eleventy-esm

Screenshots

No response

zachleat commented 4 weeks ago

Looking!

zachleat commented 4 weeks ago

I don’t think this pattern here is doing quite what you want (I see lots of them in your config file):

eleventyConfig.addPairedNunjucksShortcode(
    "callout",
    import("./config/shortcodes/callout.js")
  );

I do think the pattern would work if it weren’t returning Promise { [Module: null prototype] { default: [Function: default] } }.

This should work, but you’ll need to change all instances of the pattern:

eleventyConfig.addPairedNunjucksShortcode(
    "callout",
    (await import("./config/shortcodes/callout.js")).default
  );

Personally, I think this looks a bit nicer though:

import calloutShortcode from "./config/shortcodes/callout.js";

export default async function(eleventyConfig) {
    eleventyConfig.addPairedNunjucksShortcode("callout", calloutShortcode);
};

zachleat commented 4 weeks ago

Improved the error messaging here for all Filter/Shortcode definitions for all template syntax types. It will now look like this:

~/Temp/eleventy-3286 (eleventy-esm ✘)✹ ᐅ npx @11ty/eleventy
[11ty] 1. Error in your Eleventy config file '.eleventy.js'. (via EleventyConfigError)
[11ty] 2. Invalid definition for "callout" Nunjucks Paired Shortcode. (via Error)

Thanks! That’ll ship with 3.0.0-alpha.15

querkmachine commented 4 weeks ago

Thanks for the fix! And extra thanks for the clearer error messaging!

11ty / eleventy