TypeError: widths.map is not a function
badprogramshere opened this issue · comments
badprogramshere commented
I get this error every time I try to build an 11ty site using Nunjucks shortcodes. This is my config:
async function imageShortcode(src, alt, sizes) {
let metadata = await Image(src, {
widths: [300, 600],
formats: ["avif", "jpeg"]
});
let imageAttributes = {
alt,
sizes,
loading: "lazy",
decoding: "async",
};
return Image.generateHTML(metadata, imageAttributes);
}
// ...
module.exports = function(eleventyConfig) {
eleventyConfig.addShortcode("image", imageShortcode);
}
My shortcode is {% image "./mountains.jpg", "Photo of a mountain at day.", "100vw" %}
However, whenever I run Eleventy, I get this error:
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] 1. Having trouble rendering njk template ./content/blog/mountains/mountains.md (via TemplateContentRenderError)
[11ty] 2. (./content/blog/mountains/mountains.md)
[11ty] EleventyShortcodeError: Error with Nunjucks shortcode `image` (via Template render error)
[11ty] 3. widths.map is not a function (via Template render error)
[11ty]
[11ty] Original error stack trace: TypeError: widths.map is not a function
[11ty] at Image.getValidWidths (/Users/xxxxxx/Documents/Website/eleventy-base-blog/node_modules/@11ty./eleventy-img/img.js:183:24)
[11ty] at Image.getFullStats (/Users/xxxxxx/Documents/Website/eleventy-base-blog/node_modules/@11ty/eleventy-img/img.js:442:28)
[11ty] at Image.resize (/Users/xxxxxx/Documents/Website/eleventy-base-blog/node_modules/@11ty/eleventy-img/img.js:467:26)
[11ty] at async run (/Users/xxxxxx/Documents/Website/eleventy-base-blog/node_modules/p-queue/dist/index.js:163:29)
[11ty] Copied 5 files / Wrote 0 files in 0.13 seconds (v2.0.1)
badprogramshere commented
Closed due to user error