Vite plugin not works properly with eleventy-img plugin

[barcia]

Description

I am creating an eleventy starter project with three main features:

1. Modify the default Markdown image object using the 11ty/eleventy-img plugin to create the optimized images
2. Co-locate my images side by side with my Markdown posts
3. Use Vite with @11ty/eleventy-plugin-vite

At build time, I am having a error in terminal. I think that is because @11ty/eleventy-plugin-vite try to optimize my images before the 11ty/eleventy-img has finished its work. ¿How can I solve that?

Partial terminal verbose output

```bash EleventyImg Re-using computed hash for './src/content/articles/2023-03-02-hello/image.jpg': 'OY7bEMzlc1' +0ms EleventyImg Wrote '_site/blog/hello/OY7bEMzlc1-300.avif' +1ms EleventyImg Wrote '_site/blog/hello/OY7bEMzlc1-600.avif' +0ms Eleventy:Template _site/blog/hello/index.html written.. +19ms Eleventy:Template _site/index.html written.. +0ms Eleventy:Template _site/blog/index.html written.. +0ms EleventyImg Wrote '_site/blog/hello/OY7bEMzlc1-900.avif' +1ms [11ty] Unhandled rejection in promise: [11ty] ENOENT: no such file or directory, mkdir '_site/blog/hello' (via Error) Eleventy:EleventyErrorHandler (error stack): Error: ENOENT: no such file or directory, mkdir '_site/blog/hello' +0ms [11ty] Unhandled rejection in promise: [11ty] _site/blog/hello/OY7bEMzlc1-300.avif: unable to open for write [11ty] _site/blog/hello/OY7bEMzlc1-600.avif: unable to open for write [11ty] _site/blog/hello/OY7bEMzlc1-900.avif: unable to open for write [11ty] unix error: No such file or directory [11ty] unix error: No such file or directory [11ty] unix error: No such file or directory (via Error) Eleventy:EleventyErrorHandler (error stack): Error: _site/blog/hello/OY7bEMzlc1-300.avif: unable to open for write Eleventy:EleventyErrorHandler _site/blog/hello/OY7bEMzlc1-600.avif: unable to open for write Eleventy:EleventyErrorHandler _site/blog/hello/OY7bEMzlc1-900.avif: unable to open for write Eleventy:EleventyErrorHandler unix error: No such file or directory Eleventy:EleventyErrorHandler unix error: No such file or directory Eleventy:EleventyErrorHandler unix error: No such file or directory Eleventy:EleventyErrorHandler +0ms [11ty] Unhandled rejection in promise: [11ty] _site/blog/hello/OY7bEMzlc1-300.avif: unable to open for write [11ty] _site/blog/hello/OY7bEMzlc1-600.avif: unable to open for write [11ty] _site/blog/hello/OY7bEMzlc1-900.avif: unable to open for write [11ty] unix error: No such file or directory [11ty] unix error: No such file or directory [11ty] unix error: No such file or directory (via Error) ```

Steps to reproduce

1. Download https://github.com/barcia/eleventy-starter
2. Run 'npm install' on terminal
3. Run 'npm run build' on terminal

[EllyLoel]

I believe I'm experiencing the same (or a similar) issue on my website.

Partial terminal output

```shell [11ty] Unhandled rejection in promise: (more in DEBUG output) [11ty] ENOENT: no such file or directory, mkdir '_site/img' (via Error) [11ty] [11ty] Original error stack trace: Error: ENOENT: no such file or directory, mkdir '_site/img' [11ty] Unhandled rejection in promise: (more in DEBUG output) [11ty] ENOENT: no such file or directory, mkdir '_site/img' (via Error) [11ty] [11ty] Original error stack trace: Error: ENOENT: no such file or directory, mkdir '_site/img' [11ty] Unhandled rejection in promise: (more in DEBUG output) [11ty] ENOENT: no such file or directory, mkdir '_site/img' (via Error) [11ty] [11ty] Original error stack trace: Error: ENOENT: no such file or directory, mkdir '_site/img' [11ty] Unhandled rejection in promise: (more in DEBUG output) [11ty] _site/img/1Nd31RBowb-768.avif: unable to open for write [11ty] unix error: No such file or directory (via Error) [11ty] [11ty] Original error stack trace: Error: _site/img/1Nd31RBowb-768.avif: unable to open for write [11ty] unix error: No such file or directory [11ty] [11ty] Unhandled rejection in promise: (more in DEBUG output) [11ty] _site/img/1Nd31RBowb-768.avif: unable to open for write [11ty] unix error: No such file or directory (via Error) [11ty] [11ty] Original error stack trace: Error: _site/img/1Nd31RBowb-768.avif: unable to open for write [11ty] unix error: No such file or directory [11ty] ```

I've pushed up a branch (error-demonstration) with the changes that caused the error. If you want to compare the main branch is currently working with no errror.

Steps to reproduce

1. git clone git@github.com:EllyLoel/ellyloel.com.git
2. git checkout error-demonstration
3. pnpm install
4. pnpm build

[KiwiKilian]

Using this plugin in combination with EleventyPluginImage.statsSync is not possible. As @barcia already noted, it's a race condition, because the image creation is not awaited before vite is started. This is mostly a probably with the synchronous markdown processing (now deprecated). It always worked fine with asynchronous shortcodes. And now it's also possible with markdown directly, using the new transform approach.

So in short with all the current canary versions:

    "@11ty/eleventy": "^3.0.0-alpha.16",
    "@11ty/eleventy-img": "^5.0.0-beta.5",
    "@11ty/eleventy-plugin-vite": "^5.0.0-alpha.1",

This works:

import EleventyPluginVite from "@11ty/eleventy-plugin-vite";
import {eleventyImageTransformPlugin} from "@11ty/eleventy-img";

export default async function (config) {
    config.addPlugin(EleventyPluginVite);

    config.addPlugin(eleventyImageTransformPlugin)
};

And this:

![Some image](image.jpeg "Some Image")

Will be transformed to:

<picture>
    <source type="image/webp" srcset="/assets/OY7bEMzlc1-1280-DBEpOsrM.webp 1280w">
    <img src="/assets/OY7bEMzlc1-1280-BHpuZ2mt.jpeg" alt="Some image" title="Some Image" width="1280" height="581">
</picture>

A note to @barcia: While eleventyImageTransformPlugin colocates your images with your page, vite/rollup don't. And that's currently not possible at all with those tools.

If you have further questions, feel free to comment. Closing for now.