Next.JS: some external images fail to load with 500

[JanStevens]

Before opening, please confirm:

• I have checked to see if my question is addressed in the FAQ.
• I have searched for duplicate or closed issues.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• I have removed any sensitive information from my code snippets and submission.

App Id

dajig6o8wd38u

AWS Region

eu-west-1

Amplify Hosting feature

Not Applicable

Describe the bug

Some images fail to be optimized by next/image. For example the following image gives a 500 error:

https://develop.dajig6o8wd38u.amplifyapp.com/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F61856%2F1663872821-mdlbeast_soundstorm_28.png&w=1080&q=75

In the cloudwatch logs we can observe

Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly

Expected behavior

The image should correctly be optimised

Reproduction steps

1. The source image (can be found here: https://www.datocms-assets.com/61856/1663872821-mdlbeast_soundstorm_28.png) should be used in an Next Image
2. Example Next Image tag

<Image
  alt="image"
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPU1Tb8DwACoAGKo/qR9AAAAABJRU5ErkJggg=="
  layout="fill"
  objectFit="cover"
  placeholder="blur"
  sizes="(min-width: 900px) 800px, 300px"
  src="https://www.datocms-assets.com/61856/1663872821-mdlbeast_soundstorm_28.png"
/>

Build Settings

No response

Log output

# Put your logs below this line
Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly

Additional information

It seems that this is only the case for really large images, the example image is for example 49mb

[oliver-leung]

Hi @JanStevens, have you attempted these troubleshooting steps from the official Next.js documentation? https://nextjs.org/docs/messages/sharp-missing-in-production

[JanStevens]

Hi @JanStevens, have you attempted these troubleshooting steps from the official Next.js documentation? https://nextjs.org/docs/messages/sharp-missing-in-production

Yes, I've installed the sharp dependency manually, I do want to point out that according to Amplify docs you don't have to do that, see: https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplify-support.html

But it's clear that this is not happening at all, hence the issue

[Jay2113]

Hi @JanStevens 👋 , apologies for the delayed response here. Are you still running into this issue?

Can you confirm if your app is using images > 4.3MB in size? We have updated our docs to reflect the maximum output size of the image we support with the Amplify Hosting Compute platform: https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplify-support.html#image-optimization

The maximum output size of the image can't exceed 4.3 MB. You can have a larger image file stored somewhere and use the next/image component to resize and optimize it into a Webp or AVIF format and then serve it as a smaller size.

[github-actions]

This issue has not received a response in a while. If you want to keep this issue open, please leave a comment below and auto-close will be canceled.

[JanStevens]

Hi @JanStevens 👋 , apologies for the delayed response here. Are you still running into this issue?

Can you confirm if your app is using images > 4.3MB in size? We have updated our docs to reflect the maximum output size of the image we support with the Amplify Hosting Compute platform: https://docs.aws.amazon.com/amplify/latest/userguide/ssr-Amplify-support.html#image-optimization

The maximum output size of the image can't exceed 4.3 MB. You can have a larger image file stored somewhere and use the next/image component to resize and optimize it into a Webp or AVIF format and then serve it as a smaller size.

Hi, I do see the docs are updated, but I want to point out we are still having the issue where sharp is required to be installed in standalone mode for the image optimization to function correctly.

We will try the good old: did you try turning it off and on again (trash project in amplify, add it again)

[JanStevens]

@Jay2113 I've just tried again and same issue. In cloud watch I see

Error: 'sharp' is required to be installed in standalone mode for the image optimization to function correctly

And I notice that none of my images are being processed, ex: the banner is a full 3,7MB image 😞

https://develop.dqt3z8udsbg6k.amplifyapp.com/

[onerdy]

@JanStevens @Jay2113

Any luck with this issue? I seem to be having the same problem. Even after adding Sharp to my project and redeploying to Amplify, my images don't show up.

[d-strygwyr]

any update on this issue? i have same problem

[sdlfkorg]

update (2023/04/20):
might be helpful for the guys have similar issue:
I downgrade nextjs to version 13.2.4 and everything is going well.
ref: #3428

Also have similar problem, the project is hosted on aws amplify.
Everything is ok in nextjs 12, but the image will have 500 internal error when upgrade to 13.
It seems amplify cannot support the new Image component very well?
I didn't see this problem on Vercel.
now what I cann do is setting the images to be unoptimized in next.config.js to get rid of this issue and wait for update.

[onerdy]

update (2023/04/20): might be helpful for the guys have similar issue: I downgrade nextjs to version 13.2.4 and everything is going well. ref: #3428

It looks like downgrading the version of Nextjs fixed my issue as well. I changed my package.json from "next": "latest" (which was running 13.3.0) to "next": "~13.2.4" and now the Image optimization appears to be working on AWS Amplify.

[subhasish-smiles]

Trying to load aws-s3 images with next/image in version 13.4.7. Facing this same problem. Some images are not loading sometimes. Don't want to downgrade.

[bigboypantson]

Getting this issue still, tried next latest and v13.3, getting 500 response codes on Amplify with next/image component...

Going to try downgrade as suggested, anything being done to address this issue?

Thanks

[d-strygwyr]

AWS-amplify not maintained again? this product has dead?

[bigboypantson]

I updated my next version to next release and issue was fixed.

[d-strygwyr]

I updated my next version to next release and issue was fixed.

has fixed with next rc version ?

[onerdy]

I updated my next version to next release and issue was fixed.

What is the version number that is working for you now?

[bigboypantson]

Going up to 13.4.6 from 13.3.0 made it work.

[bigboypantson]

Sorry, wasn't the very NEXT release as I stated previously.

[S4Mi]

For me the problem seemed to be with the 'sharp' package, once removed it was fixed.

[Alikhan2904]

I'm using NEXT version 13.4.17 and the images are not getting rendered for me. Also, I can't downgrade the version as the application is using some newer features such as server components which are not supported before NEXT 13.4. Is there any other way around?

[d-strygwyr]

I'm using NEXT version 13.4.17 and the images are not getting rendered for me. Also, I can't downgrade the version as the application is using some newer features such as server components which are not supported before NEXT 13.4. Is there any other way around?

Do you have to try @S4Mi mention? remove Sharp on dependency?

[Jay2113]

Hi everyone 👋 , towards the end of last year (Nov '23) we launched support for image optimization for all SSR apps and the issue outlined in this thread should no longer occur with it. To learn more about Amplify Hosting's built-in image optimization feature, refer to this documentation: https://docs.aws.amazon.com/amplify/latest/userguide/image-optimization.html.

[github-actions]

This issue is now closed. Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.

[github-actions]

This issue has been automatically locked.