"ENOENT: no such file or directory" - next.js crashes, related to image caching?

[bonesoul]

Run next info (available from version 12.0.8 and up)

root@1d90163fc150:/app# npx --no-install next info
/bin/sh: 1: pnpm: not found

    Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Debian 4.19.171-2 (2021-01-30)
    Binaries:
      Node: 17.4.0
      npm: 8.3.1
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.0.10
      react: 17.0.2
      react-dom: 17.0.2

What version of Next.js are you using?

12.0.10

What version of Node.js are you using?

17.4.0

What browser are you using?

Chrome

What operating system are you using?

Debian

How are you deploying your application?

next build

Describe the Bug

Upgraded my site to next.js 12.0.10 and with the new release started getting errors;

today at 2:27:38 PMready - started server on 0.0.0.0:3000, url: http://localhost:3000
today at 2:27:38 PMinfo  - Loaded env from /app/.env.production
today at 2:27:38 PMinfo  - Loaded env from /app/.env
today at 2:27:39 PMwarn  - SWC minify beta enabled. https://nextjs.org/docs/messages/swc-minify-enabled
today at 2:37:32 PMError: ENOENT: no such file or directory, open '/app/.next/cache/images/iLU6LIXA6TCl8SepFjJ5LNbyzLiOqZ7U49T1Ftm+jW4=/0.1643714865404.blKDVxGlp5+pf7TBeZBnD7i-BF2A5hQCHH0jGL--cVU=.avif'

and then next server dies and restarts

Expected Behavior

shouldn't be crashing.

To Reproduce

any code with avif + image caching support i guess

[bonesoul]

disabled avif but now also getting the same issue with webp images:

ENOENT: no such file or directory, open '/app/.next/cache/images/zI1zuWH5IH-N5N0jSgcuQfhtq3QexsW6tQsi7zjMKSs=/0.1643720036128.wPZdv3V4PWqtqo2xcqzGTEnd03SEeji615bPHom1Z-0=.webp'

[bonesoul]

downgraded to 12.0.9 now and it seems all good, i think this may be the offfending commit: #33719

[andersonba]

Same here

    Operating System:
      Platform: linux
      Arch: x64
      Version: #107~16.04.1-Ubuntu SMP Fri Feb 26 16:08:47 UTC 2021
    Binaries:
      Node: 16.13.0
      npm: 8.1.0
      Yarn: 1.22.10
      pnpm: N/A
    Relevant packages:
      next: 12.0.10
      react: 17.0.2
      react-dom: 17.0.2

Error: ENOENT: no such file or directory, open '/app/.next/cache/images/HzZlZ8LwX5yhyrTFeQMYEB4hhx97JC+MY7cUDEPrASw=/3600.1643726214517.ma-zVhFpWc8J-pqc-BfyUnRCC8OW4anHCDBD9q8N+I4=.webp'
Error: ENOENT: no such file or directory, open '/app/.next/cache/images/HzZlZ8LwX5yhyrTFeQMYEB4hhx97JC+MY7cUDEPrASw=/3600.1643726214517.ma-zVhFpWc8J-pqc-BfyUnRCC8OW4anHCDBD9q8N+I4=.webp'

[edited]

Apparently, it worked again in version 12.0.9

[icflorescu]

Same here. I can also confirm it happens on Node.js 16.13.2 LTS. It's actually pretty bad - my production app started failing and the Docker container kept restarting once every few requests.

It does work after reverting to 12.0.9.

[styfle]

I'm not able to reproduce, but I believe there's a race condition when the stale image is being served from the cache but it gets deleted before the stream completes.

PR #33883 should fix it.

If anyone could provide a repo that crashes every time, that would be great to validate so we could add it as an integration test to avoid regressing.

[b-novikov-ipersonality]

@styfle hey. Here's the repo that crashes: https://github.com/b-novikov-ipersonality/nextjs-cache-crash

1. yarn build
2. yarn start
3. Open http://localhost:3000
4. Refresh page
5. Experience crash.

[styfle]

Great, thanks!

I was able to reproduce once adding a Dockerfile and a few other steps mentioned in this PR.

[styfle]

This is fixed on canary, thanks!

You can try it out today with npm i next@canary or yarn add next@canary.

I also discovered that serving stale images wasn't any faster because revalidation wasn't happening in the background, it was blocking. So I created PR #33930 with the another fix. (Update: closed in favor of #34075)

Update: This has been released in Next.js 12.1.0

[danielGz]

I downgraded to 12.0.9 and also installed the canary version and although the server doesn't crash I get the error a lot and reloading the page has unpredictable behavior with images, sometimes few of them load sometimes others won't.

[ghost]

Wow thanks. This is one of those rare occasions that I search for an error, only to find it wasn't my mistake and fixed in the last few days 😍

Sending appreciation for next@canary and nextjs team!

[yayza]

Downgraded to 12.0.9 fixed it for me (no errors or crash), the new canary version would still throw errors every time I scrolled past an image, but wouldn't crash server like 12.0.10.

[ijjk]

@yayza have you tried v12.0.11-canary.11 this has been updated some more in that version and should be resolved now.

[gngo2018]

Ran into this issue when trying to install. Has anyone else come across this?

npm ERR! Found: next@12.0.11-canary.11
npm ERR! node_modules/next
npm ERR! next@"^12.0.11-canary.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@">=10.2.0" from eslint-config-next@11.0.1
npm ERR! node_modules/eslint-config-next
npm ERR! dev eslint-config-next@"11.0.1" from the root project

[ijjk]

@gngo2018 it looks like you have other dependencies that need to be updated as well e.g. eslint-config-next

[yayza]

@yayza have you tried v12.0.11-canary.11 this has been updated some more in that version and should be resolved now.

@ijjk Yes, I also tried v12.0.11-canary.12 and it works as far as the server doesn't crash, but I still get these types of errors filling up server console for every image I scroll past when viewing the site:

[Error: ENOENT: no such file or directory, stat 'C:\Users\yaeza\Desktop\Projects\as\.next\cache\images\5RqXPEoGLuXkIjTm2UDMsDVWjM4mCsyLvUfP3suox88='] {
  errno: -4058,
  syscall: 'stat',
  path: 'C:\\Users\\yaeza\\Desktop\\Projects\\as\\.next\\cache\\images\\5RqXPEoGLuXkIjTm2UDMsDVWjM4mCsyLvUfP3suox88='
}

[ijjk]

@yayza can you confirm you updated properly with yarn why next or npm ls next? The reading of the cache is now wrapped in a try/catch so the error should not be able to be logged anymore x-ref

next.js/packages/next/server/image-optimizer.ts

Line 204 in abf781f

const buffer = await promises.readFile(join(cacheDir, file))

[yayza]

@yayza can you confirm you updated properly with yarn why next or npm ls next? The reading of the cache is now wrapped in a try/catch so the error should not be able to be logged anymore x-ref

next.js/packages/next/server/image-optimizer.ts

Line 204 in abf781f

const buffer = await promises.readFile(join(cacheDir, file))

@ijjk I just checked and it says it's the updated version

https://streamable.com/5l59q7

[ijjk]

@yayza Ah I see, thanks for sharing that additional info, looks like this is an issue with writing to cache specifically with the rmdir method used to clean the dir. I opened a PR with a fix for this here #34210

[shyamsukhamit]

Facing the same issue event after updating to nextjs 12.0.9 - docker is crashing every now and then - in my live app. This is my first app. Can anyone please help!

[havran]

Facing the same issue event after updating to nextjs 12.0.9 - docker is crashing every now and then - in my live app. This is my first app. Can anyone please help!

You should lock NextJS to version 12.0.9:

    "next": "12.0.9", // !!! without ^ before
    // and from devDependencies
    "@next/bundle-analyzer": "12.0.9",
    "eslint-config-next": "12.0.9",

and npm install again.

[shyamsukhamit]

Facing the same issue event after updating to nextjs 12.0.9 - docker is crashing every now and then - in my live app. This is my first app. Can anyone please help!

You should lock NextJS to version 12.0.9:

    "next": "12.0.9", // !!! without ^ before
    // and from devDependencies
    "@next/bundle-analyzer": "12.0.9",
    "eslint-config-next": "12.0.9",

and npm install again.

Thanks @havran it seems to be working now - still monitoring.

[ijjk]

@yayza the above PR is now landed in v12.0.11-canary.13, please update and give it a try!

[yayza]

No more errors, thanks alot for the quick fix!

[joggienl]

I have this error as well, @ijjk out of curiosity, when is 12.0.11 planned to be released? Knowing would help me in how I would like to work around this for now.

[tm1000]

@joggienl they just released 12.1.0 today

[joggienl]

so the answer to when is never 😅

[derkoe]

Is the fix in 12.1?

Just found it - it is in 12.1: e3e62aa

[joggienl]

@derkoe you can check the release information here: https://github.com/vercel/next.js/releases/tag/v12.1.0

There is a reference to the pull requests that are mentioned in this issue:

#33883
#34075
#34210

[MobinX]

oh it seems to be fixed
yarn add next@latest
yarn build && yarn start

no more crashing

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.