Firebase - Image Component Images Fail on Read with 500 Error

[classic-massok]

What example does this report relate to?

https://github.com/jthegedus/firebase-gcp-examples/tree/main/functions-nextjs

What version of Next.js are you using?

10.0.8

What version of Node.js are you using?

12.0.0

What browser are you using?

Chrome

What operating system are you using?

n/a

How are you deploying your application?

Firebase

Describe the Bug

When hosting the example, images do not render and fall back to the alt text instead. They fail with a 500 error that is shown below in repro steps. From what I can tell, the image component is trying to unlink an existing symlink to the cache (assuming to create a new cache entry?) and that is failing due to read_only permissions allowed on folders in google cloud (expect for /tmp.)

Expected Behavior

Images should be loaded w/o issue using the function redirect.

To Reproduce

1. Follow the example in the repository and deploy to firebase
2. Go to the webapp that you deployed
3. Notice in the footer that images do not render and the alt text is shown
4. Inspect function logs and notice an error with unlink command

[Error: EROFS: read-only file system, unlink '/workspace/.next/cache/images/5twX2mFdcQnC6nUHIr1Jw2n+lhpdA-fqFY7TtkzbB4w=/1615832649896.n2X+hgGkRq4zK-2dmX0pBOkZ5HS3wwqYgcYaLgLTHeo=.webp'] { 
  errno: -30, 
  path: '/workspace/.next/cache/images/5twX2mFdcQnC6nUHIr1Jw2n+lhpdA-fqFY7TtkzbB4w=/1615832649896.n2X+hgGkRq4zK-2dmX0pBOkZ5HS3wwqYgcYaLgLTHeo=.webp',
  code: 'EROFS'
}

This is my first time using Next.js and Firebase, so I am very aware that this could be user error. I have read through https://github.com/vercel/next.js/issues/6275?ref=oo.t9t.io and related issues to see if I could find an answer, but have had no luck.

[leerob]

@classic-massok Please don't bump issues repeatedly 🙏

[jrn2778]

Hello,

I wanted to try and provide some help so I did some testing. Unfortunately, I was not able to reproduce the error. I followed the example as given. Locally, everything worked fine, footer images properly displaying. I needed to make some changes in order to deploy to Firebase*, but afterwards it still worked fine. Are there any other details you can give about your process? Does it work on a local server?

Additionally, these may be of assistance if you have not already seen them:
https://stackoverflow.com/questions/44849554/how-can-make-folder-with-firebase-cloud-functions-storage
https://stackoverflow.com/questions/51308489/google-clould-functions-deploy-erofs-read-only-file-system

*Disclaimer: In order to properly deploy the app as is in the example, I would have had to upgrade my Firebase project to the Blaze version which I did not want to do. In order to avoid this I converted the example to be fully static by taking out the blog rendering code, exporting it to the out/ directory with next export and changing the hosting public path in firebase.json to out/. I left everything else untouched.

[sohhamm]

I'm facing the same issue, any temporary fixes?

[pierratdev]

Have you checked the amount of memory allocated to your application?

[mrjackyliang]

I am also facing the same issue, still looking for resolutions on how to fix it. Will report back.

[raphaelsaunier]

Ran into the same issue after adding a next/image component to the official example and deploying it to Firebase Cloud Functions (Next.js 12, Node.js 14 runtime, 256MB memory).

Given that this is labelled as a “good first issue”, I'd be happy to take a stab at fixing it if you give me some pointers! Scratch that… I ended up just deploying the thing to Vercel where it “just works”. 😅

Also, I saw that #10111 was closed, but wouldn't this be a potential solution?

[ParkHeeseung]

i'm also facing the same issue, (Next.js v12 Node.js v12)

Solution:
Don't use next/image. use tag

If you need an optimized image file, you can use a plugin "next-optimized-images" during build.
https://blog.whereisthemouse.com/image-optimization-for-static-nextjs-sites

[balazsorban44]

Based on #23122 (comment) and since the OP's example is not coming from our examples repo, I am going to close this.

If you have an issue with one of the examples in the repo, please open a separate case for that.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.