ENOENT: no such file or directory, image plugin issue?

[victorfeight]

$ npx @11ty/eleventy --version 1.0.1-canary.3

node version 16.13.2

I've emulated this theme's features to the best of my ability into my site, and it's been working fine for several months, but recently I've had a strange issue I was wondering if somebody could help me fix.

My typical flow is, I write my posts in markdown. I think copy and paste the images into img folder. I then run npm run serve or npm run watch, or npm run build followed by ./.persistimages and then git push.

Recently, I added a few images to img folder. Then I ran a build and push, then renamed the images and deleted one. Now eleventy is throwing a fit about it, and it's preventing images from displaying correctly.

ENOENT: no such file or directory, open 'C:\Users\Vic\Documents\CODE_2020\ELEVENTY\myblog\_site\VLSM_289374010_1610151022774833_6442967407583153458_n.jpg' VLSM_289374010_1610151022774833_6442967407583153458_n.jpg
ENOENT: no such file or directory, open 'C:\Users\Vic\Documents\CODE_2020\ELEVENTY\myblog\_site\VLSM_289000397_991349464818660_1602431672010007453_n.jpg' VLSM_289000397_991349464818660_1602431672010007453_n.jpg

Firstly, I feel as if my eleventy run did not trigger the image plugins as they're supposed to... I'm talking about img-dim.js did not create a blurry placeholder, srcset.js did not create extra sizes of the image, as indicative by looking into the img folder. I'm wondering what could be the cause behind these scripts not triggering. Here is the top of my eleventy.js, with all relevant img transformations.

// Plugins
// https://www.webstoemp.com/blog/basic-custom-taxonomies-with-eleventy/
const timeToRead = require("eleventy-plugin-time-to-read");
const pluginRss = require("@11ty/eleventy-plugin-rss");
const lodash = require("lodash");
const { DateTime } = require("luxon");
const english = new Intl.DateTimeFormat("en");

// Filters
const searchFilter = require("./blog/filters/searchFilter");
const include = require("./blog/filters/include");
const getAllKeyValues = require("./blog/filters/getAllKeyValues");
const strToSlug = require("./blog/filters/strToSlug");
const customOutput = require("./blog/filters/customOutput");
const commaCategory = require("./blog/filters/commaCategory");
const extractExcerpt = require("./blog/filters/extractExcerpt");
const customDate = require("./blog/filters/customDate");
const moment = require('moment');  

// NEW
const { promisify } = require("util");
const fs = require("fs");
const path = require("path");
const hasha = require("hasha");
const touch = require("touch");
const readFile = promisify(fs.readFile);
const readdir = promisify(fs.readdir);
const stat = promisify(fs.stat);
const execFile = promisify(require("child_process").execFile);
const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const pluginNavigation = require("@11ty/eleventy-navigation");
const markdownIt = require("markdown-it");
const markdownItAnchor = require("markdown-it-anchor");
const CleanCSS = require("clean-css");
//const GA_ID = require("./blog/_data/metadata.json").googleAnalyticsId;
const { jsonLd } = require("./_11ty_scripts/json-ld.js");

/////////////
///////////// Plugin functions
/////////////
const { optimizeAmp, purifyCss, minifyHtml } = require("./_11ty_scripts/optimizeHtml.js");
const { dimImages } = (require("./_11ty_scripts/img-dim.js"));
const { grabRemoteImages } = require('./_11ty_scripts/localImages.js');

module.exports = (eleventyConfig) => {
  /////////////
  ///////////// Plugins
  /////////////
  eleventyConfig.addPlugin(pluginRss);
  eleventyConfig.addPlugin(pluginSyntaxHighlight);
  eleventyConfig.addPlugin(pluginNavigation);
  eleventyConfig.addTransform("localimages", grabRemoteImages);
  eleventyConfig.addTransform("imgDim", dimImages);
  eleventyConfig.addTransform("jsonLd", jsonLd);

Now, the strangest thing is that I'm not sure how Eleventy is finding this ghost filename "VLSM_289374010_1610151022774833_6442967407583153458_n.jpg" currently. Secondly, whenever I run eleventy serve, the html version that is written inside of _site does contain ghost references to these files, on every build. I'm wondering where it could be getting this from.

Steps I've taken:

1. I deleted the _site folder, deleted browser cache, event tried to rename _headers before build. Purged cache in cloudflare.
2. Then I removed the new post and all the new images, deleted _site, rebuilt, and no error.
3. I ran ./.persistimages and git pushed.
4. Deleted node_modules, installed again
5. Added .md file back, and images back. When running eleventy serve, the local image scripts aren't running, and that ghost filename comes back into _site/blog_post/index.html. If anybody could help me investigate this ghost filename issue, I would be most appreciative.

In addition, here is my package.json:

{
    "name": "myblog",
    "author": "vrfeight@gmail.com",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "start": "set NODE_ENV=production && node ./bin/www",
        "11ty": "npx @11ty/eleventy",
        "eleventy": "eleventy",
        "sass": "node-sass ./public/scss/styles.scss -o ./public/css/",
        "build-ci": "npm run js-build && npm run eleventy && npm run test",
        "build": "npm run clean && npm run build-ci",
        "watch": "concurrently \"npm run serve\" \"npm run js-build-watch\" \"npm run test-watch\"",
        "serve": "npm run clean && npx @11ty/eleventy --serve",
        "js-build": "rollup -c rollup.config.js --sourcemap",
        "js-build-watch": "rollup -c rollup.config.js -w",
        "debug": "DEBUG=Eleventy* npx @11ty/eleventy && npm run test",
        "test": "mocha test/test*.js",
        "test-watch": "mocha test/test*.js --watch --watch-files=test/*",
        "clean": "rm -Rf ./_site/*"
    },
    "pre-push": [
        "build"
    ],
    "pre-commit": [],
    "dependencies": {
        "@11ty/eleventy-fetch": "^3.0.0",
        "@ampproject/toolbox-optimizer": "^2.4.0",
        "@fullhuman/postcss-purgecss": "^4.1.3",
        "@popperjs/core": "^2.11.2",
        "@rollup/plugin-node-resolve": "^13.1.3",
        "@rollup/plugin-replace": "^4.0.0",
        "any-shell-escape": "^0.1.1",
        "clean-css": "^5.2.4",
        "concurrently": "^7.0.0",
        "cookie-parser": "~1.4.6",
        "csp-hash-generator": "0.0.3",
        "csso": "^4.0.3",
        "datauri": "^3.0.0",
        "debug": "~4.3.3",
        "dotenv": "^15.0.0",
        "elasticlunr": "^0.9.5",
        "eleventy-plugin-time-to-read": "^1.1.1",
        "expect.js": "^0.3.1",
        "express": "~4.17.2",
        "ffmpeg-static": "^4.4.0",
        "fs": "^0.0.1-security",
        "hasha": "^5.2.0",
        "hbs": "~4.2.0",
        "html-minifier": "^4.0.0",
        "http-errors": "~2.0.0",
        "image-size": "^0.8.3",
        "jimp": "^0.16.1",
        "lodash": "^4.17.21",
        "lru-cache": "^5.1.1",
        "luxon": "^2.3.0",
        "mdb-ui-kit": "^3.10.2",
        "mocha": "^8.1.3",
        "moment": "^2.29.1",
        "morgan": "~1.10.0",
        "phin": "^3.5.0",
        "postcss": "^8.4.7",
        "purge-from-html": "^1.0.3",
        "purgecss": "^4.0.3",
        "querystring": "^0.2.0",
        "rollup": "^2.23.0",
        "sharp": "^0.30.6",
        "slugify": "^1.6.5",
        "touch": "^3.1.0",
        "twitter": "^1.7.1"
    },
    "devDependencies": {
        "@11ty/eleventy": "^1.0.1",
        "@11ty/eleventy-navigation": "^0.3.2",
        "@11ty/eleventy-plugin-rss": "^1.1.2",
        "@11ty/eleventy-plugin-syntaxhighlight": "^3.2.2",
        "@rollup/plugin-commonjs": "^21.0.2",
        "@types/express": "^4.17.13",
        "@types/node": "^17.0.14",
        "eleventy-plugin-local-images": "^0.4.1",
        "file-type": "^12.4.2",
        "fs-extra": "^8.1.0",
        "jsdom": "^15.2.1",
        "luxon": "^1.21.3",
        "markdown-it": "^12.3.2",
        "markdown-it-admon": "^1.0.0",
        "markdown-it-anchor": "^5.2.5",
        "node-fetch": "^2.6.7",
        "node-sass": "^7.0.1",
        "path": "^0.12.7",
        "pre-commit": "^1.2.2",
        "pre-push": "^0.1.1",
        "rollup-plugin-terser": "^6.1.0",
        "shorthash": "^0.0.2"
    }
}

[victorfeight]

The problem lead me to believe the files were being cached somewhere, but in actuality, the markdown blog post was not being saved before being rebuilt, causing the file to keep reverting to the previous version.

[cozarkd]

I'm getting the same error in a custom build with this. First I thought that I had to write the eleventyConfig.addPassthroughCopy before other codes but the error keeps showing even when I build all images are there in the public output.

Do you remember how did u fix this?

[victorfeight]

Hello @cozarkd , can you walk me through the behavior you're experiencing? It was quite a while ago so I don't remember the exact fix