Using Eleventy "Image" plugin. How can I see DEBUG output?

Support
,
1

My site is https://davidrhoden.com.

I recently added the Eleventy Image plugin to create thumbnails for a “timeline” feature I have on the site (https://davidrhoden.com/timeline/; scroll to bottom to see the thumbnails. I generated those thumbs manually, though.).

I have had successful builds on localhost, though I had many errors on the way. The error I get seems to indicate that the plugin quits if the expected input file is missing. Here’s the error:

> 1:59:25 PM: Error writing templates: (more in DEBUG output)
> 1:59:25 PM: > Having trouble writing template: _site/timeline/index.html
> 1:59:25 PM: `TemplateWriterWriteError` was thrown
> 1:59:25 PM: > (./_includes/layouts/timeline-index.njk)
> 1:59:25 PM: EleventyShortcodeError: Error with Nunjucks shortcode `image`
> 1:59:25 PM: `Template render error` was thrown
> 1:59:25 PM: > Input file contains unsupported image format
> 1:59:25 PM: `Template render error` was thrown:
> 1:59:25 PM: Error: Input file contains unsupported image format
> 1:59:25 PM: Problem writing Eleventy templates: (more in DEBUG output)
> 1:59:25 PM: > Having trouble writing template: _site/timeline/index.html
> 1:59:25 PM: `TemplateWriterWriteError` was thrown
> 1:59:25 PM: > (./_includes/layouts/timeline-index.njk)
> 1:59:25 PM: EleventyShortcodeError: Error with Nunjucks shortcode `image`
> 1:59:25 PM: `Template render error` was thrown
> 1:59:25 PM: > Input file contains unsupported image format
> 1:59:25 PM: `Template render error` was thrown:
> 1:59:25 PM: Error: Input file contains unsupported image format

I can run the DEBUG locally and it will telll me which image is missing, but I don’t know how to run the DEBUG build on Netlify.
I feel like if I could do that the error message would tell me what’s really wrong.

Additionally, I’m currently running a DEBUG build on localhost, and it’s been building for about an hour with no sign of stopping,

Here’s my eleventy.js code realted to the Image plugin:

async function imageShortcode(src, alt) {
  if(alt === undefined) {
    // You bet we throw an error on missing alt (alt="" works okay)
    throw new Error(`Missing \`alt\` on myImage from: ${src}`);
  }

  const fullSrc = isFullUrl(src) ? src : path.join(__dirname, '/static/img/timeline/') + src ;
  let metadata = await Image(fullSrc, {
    widths: [32, 160],
    formats: ["jpeg"],
    urlPath: "/static/img/timeline/thumbnails/",
    outputDir: "./_site/static/img/timeline/thumbnails/",
    useCache: false
  });

  let data = metadata.jpeg[metadata.jpeg.length - 1];
  return `<img src="${data.url}" width="${data.width}" height="${data.height}" alt="${alt}" loading="lazy" decoding="async">`;
}

Mostly I’d just like to know how to see that DEBUG output on Netlify.

2

In short, you can’t run a Debug build on Netlify. Netlify is meant for production hosting, so you can’t keep the live development server running as the build will eventually timeout and fail.

You’ll have to manage the Debug stuff locally, fix it, publish to Netlify.

1 Like
3

Well, thanks for the answer. The site does build locally but it takes a long time; I think that must be why it’s failing on production. I’ll try debugging some more locally.

1 Like