Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Don't know where shortcode fails in Nunjucks template #3330

Closed
antgel opened this issue Feb 1, 2024 · 5 comments
Closed

Don't know where shortcode fails in Nunjucks template #3330

antgel opened this issue Feb 1, 2024 · 5 comments

Comments

@antgel
Copy link

antgel commented Feb 1, 2024

Operating system

Xubuntu 22.04

Eleventy

2.0.1

Describe the bug

I have a fairly standard setup using an image shortcode to generate responsive images.

  eleventyConfig.addShortcode("image", async function(src, alt, klass, sizes, loading) {
    let metadata = await Image(src, {
      widths: [500, 750, 1000, "auto"],  // aligned with Strapi size optimization
      formats: ["avif", "webp", "jpeg"],
      outputDir: "dist/img"
    });

    let imageAttributes = {
      class: klass,
      alt,
      sizes,
      loading: loading || "eager",
      decoding: "async",
    };

    // You bet we throw an error on a missing alt (alt="" works okay)
    return Image.generateHTML(metadata, imageAttributes);
  });

I use this several times in a template that consumes JavaScript data from Strapi, e.g.
{% image industrial.attributes.roadmapPhoto.data.attributes.url, "Roadmap photo", "img-fluid rounded-3", "(max-width: 500px) 100vw, (max-width: 750px) 100vw, (max-width: 1000px) 100vw" %}

However, if industrial.attributes.roadmapPhoto.data.attributes.url is undefined, we get an error as per below.

[11ty] File changed: src/industrials.njk
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./src/industrials.njk (via TemplateContentRenderError)
[11ty] 2. (./src/industrials.njk)
[11ty]   EleventyShortcodeError: Error with Nunjucks shortcode `image` (via Template render error)
[11ty] 3. `src` is a required argument to the eleventy-img utility (can be a String file path, String URL, or Buffer). (via Template render error)
[11ty] 
[11ty] Original error stack trace: Error: `src` is a required argument to the eleventy-img utility (can be a String file path, String URL, or Buffer).
[11ty]     at new Image (/home/antony/Sync/src/git/glenmore-frontend/node_modules/@11ty/eleventy-img/img.js:118:13)
[11ty]     at queueImage (/home/antony/Sync/src/git/glenmore-frontend/node_modules/@11ty/eleventy-img/img.js:622:13)
[11ty]     at Object.<anonymous> (/home/antony/Sync/src/git/glenmore-frontend/.eleventy.js:55:24)
[11ty]     at Object.<anonymous> (/home/antony/Sync/src/git/eleventy-antgel/src/BenchmarkGroup.js:32:26)
[11ty]     at ShortcodeFunction.run (/home/antony/Sync/src/git/eleventy-antgel/src/Engines/Nunjucks.js:200:14)
[11ty]     at eval (eval at _compile (/home/antony/Sync/src/git/eleventy-antgel/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:232:33)
[11ty]     at iterCallback (/home/antony/Sync/src/git/eleventy-antgel/node_modules/nunjucks/src/runtime.js:236:11)
[11ty]     at next (/home/antony/Sync/src/git/eleventy-antgel/node_modules/nunjucks/src/lib.js:258:7)
[11ty]     at eval (eval at _compile (/home/antony/Sync/src/git/eleventy-antgel/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:236:1)
[11ty]     at /home/antony/Sync/src/git/eleventy-antgel/src/Engines/Nunjucks.js:202:15
[11ty] Benchmark     54ms  32%   246× (Configuration) "slugify" Nunjucks Filter
[11ty] Copied 9 files / Wrote 0 files in 0.17 seconds (v2.0.1)

The problem is that 11ty doesn't tell me where in the template it failed, which is frustrating as this shortcode is used in tens of places in the template, so I have to start commenting them out to see what happened. Can this information be exposed?

Note that running with DEBUG doesn't add any more useful information.

Reproduction steps

No response

Expected behavior

No response

Reproduction URL

No response

Screenshots

No response

@noelforte
Copy link

This is most likely an issue of how your code interfaces with eleventy-img and not Nunjucks. Nunjucks won't complain because the "image" tag is valid and has associated code to execute, it's the result of the process that controls rendering that tag where your error occurs and that information isn't something Nunjucks knows about.

Your issue stems from this error message:

[11ty] Original error stack trace: Error: `src` is a required argument to the eleventy-img utility (can be a String file path, String URL, or Buffer).

Be sure that you're passing something as src to Image(src, {...options}) otherwise you'll get an error. console.log the src param just before you call Image to debug what's actually getting passed.

Also for future reference, issues regarding eleventy-img should be opened in the 11ty/eleventy-image repo.

@zachleat
Copy link
Member

zachleat commented Jun 19, 2024

Maybe related to #3295

@zachleat zachleat transferred this issue from 11ty/eleventy Jun 19, 2024
@zachleat
Copy link
Member

zachleat commented Jun 19, 2024

I moved this to 11ty/eleventy-img but I immediately changed my mind. Gonna move this one back to core.

@zachleat zachleat transferred this issue from 11ty/eleventy-img Jun 19, 2024
@zachleat
Copy link
Member

I think there’s something here, for sure. Throwing an error in a shortcode should report where in the template it came from.

@zachleat
Copy link
Member

This was fixed by #3286!

Here’s what it looks like starting with 3.0.0-alpha.15:

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./contentfile.njk (via TemplateContentRenderError)
[11ty] 2. (./contentfile.njk)
[11ty]   EleventyShortcodeError: Error with Nunjucks shortcode `test` (via Template render error)
[11ty] 3. NO! (via Template render error)
[11ty] 
[11ty] Original error stack trace: Error: NO!
[11ty]     at Object.<anonymous> (file:///Users/zachleat/Temp/eleventy-3330/eleventy.config.js:3:9)
[11ty]     at Object.fn (file:///Users/zachleat/Code/eleventy/src/Benchmark/BenchmarkGroup.js:36:23)
[11ty]     at ShortcodeFunction.run (file:///Users/zachleat/Code/eleventy/src/Engines/Nunjucks.js:235:29)
[11ty]     at Template.root [as rootRenderFunc] (eval at _compile (/Users/zachleat/Code/eleventy/node_modules/nunjucks/src/environment.js:527:18), <anonymous>:9:64)
[11ty]     at Template.render (/Users/zachleat/Code/eleventy/node_modules/nunjucks/src/environment.js:454:10)
[11ty]     at file:///Users/zachleat/Code/eleventy/src/Engines/Nunjucks.js:444:10
[11ty]     at new Promise (<anonymous>)
[11ty]     at file:///Users/zachleat/Code/eleventy/src/Engines/Nunjucks.js:443:11
[11ty]     at Template._render (file:///Users/zachleat/Code/eleventy/src/TemplateContent.js:588:25)
[11ty]     at async TemplateMap.populateContentDataInMap (file:///Users/zachleat/Code/eleventy/src/TemplateMap.js:537:7)
[11ty] Wrote 0 files in 0.03 seconds (v3.0.0-alpha.17)

@zachleat zachleat added this to the Eleventy 3.0.0 milestone Jul 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants