11ty / eleventy-img

Utility to perform build-time image transformations.

Home Page:https://www.11ty.dev/docs/plugins/image/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError: widths.map is not a function

badprogramshere opened this issue · comments

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)

Closed due to user error