Netlify Next.js images throw IPX Error 500

Support
30

Hi @hillary

Just uploaded a mini demo which demonstrates the error. Source code at: GitHub - liefra/nettmp

I use the following command to build and deploy from my Mac: netlify deploy --build --prod

Logs: Netlify App
Unique Deploy URL: https://6239b3e9823799461a727f2d--imagefnekngkengkjerngkjgnkejn.netlify.app
Website URL: https://imagefnekngkengkjerngkjgnkejn.netlify.app

The website has one image in the blue header. Only the blurred preview image is displayed. The main image resolves to a 500 error.

Please let me know if you need more details. Thank

32

Hey there, @686 :wave:

Can you please try upgrading your version of the next plugin to our latest? This may address the error you are seeing. You can read more here:

33

Hi @hillary

Thank you for your reply. Just gave it another try with the next plugin version 4.3.0, but the error is still there.

Logs: Netlify App
Unique Deploy URL: https://623b2bac38824d0075d18212--imagefnekngkengkjerngkjgnkejn.netlify.app
Website URL: https://imagefnekngkengkjerngkjgnkejn.netlify.app

Do you maybe have other ideas what I could try?

34

We faced the same issue after updating @netlify/plugin-nextjs, the problem seems to be since they switched to ipx

In our particular case we have a proxy so we needed to update our rules to include the new _ipx endpoint.

Another issue we faced was with the content-type of our resources, we used to return content-type: binary/octet-stream but they introduced this magnificent check here causing all our images to break, so we needed to adjust.

I hope this findings can help anyone having similar issues.

2 Likes
35

Same problem here.
Master branch get deployed fine from CI, but deploying from my local MacOS machine yields broken images. I’m using Essential Next.js 4.3.0 Plugin.
I’m using pnpm exec netlify deploy --build to deploy locally.
Repo - GitHub - gamliela/website: My personal website. Playing around with serverless and micro-frontends implementation.
Website - https://gamliela.com/
Broken deploy example - https://623e989358aa856e895d74e1--gamliela-website.netlify.app/

1 Like
37

Hey folks, by reading the latest comments, I think the issue only occurs when trying to deploy from CLI, correct? Did I miss someone who is having this issue with deploying from Netlify Build pipeline? If so, please let me know.

About the CLI problem, it seems to be a little tough to handle. Node.js installs platform-specific binary for Sharp. So when you use in on devices other than Linux-based OSs, you’d face this problem as AWS Lambda runs Linux-based dependencies. So when you bundle from CLI, the macOS or Windows-specific dependency doesn’t work there and thus the issue.

We’d try to come up with a solution to tackle this, but I believe, at this point your options are:

  1. Build using Netlify Build
  2. Use some other Linux-based build system like GitHub Actions and publish the deploy to Netlify.
3 Likes
38

Thank you for that clarification. Then we will go ahead and make use of a Linux-based build system to solve this issue

1 Like
39

Thanks for that clarification! may I add that updating the docs is essential. After all, the stack of Next.js, Images, macOS and CLI deployment is pretty common IMO.

3 Likes
41

Hey there, @gamliela :wave:

Thanks for chiming in! I have shared your feedback with the appropriate teams.

1 Like
42

Hello all,
I am currently facing this issue also when using version 4.7.1 of the plugin and building from cli on MacOS.

If any logs can be of help, I’m more than happy to provide them as I hope this issue can be solved.

43

Hey @jorgebef,

Thank you for chiming in. As mentioned before, this has been shared with the teams in charge, however having a solution in place is going to be difficult because there are multiple variables involved in this that are outside Netlify’s control. The team is still working to see if this can be worked around.

1 Like
44

Just one thing I noticed that may be useful.
I don’t encounter the issue with SVG images. It doesn’t matter if it is a true SVG or if it’s simply a bitmap inside an SVG.
It might be a temporary and very dirty workaround for some, just putting it out there for the team to maybe see why some formats don’t have ipx error out as it might shed some light on the subject.
Thank you for your reply!

45

Thanks for the info. That should be helpful to the engineers.

46

Thank you for your work on the issue, I hope it can be fixed or provide an alternative.

Just one thought is maybe using a Docker container which uses the appropriate versions to build and deploy to Netlify.

Is there a Docker image that you are able to provide that is officially supported or any tips to get there?

Thank you in advance!

49

Yeah, we do have a Docker image which you can use to build locally:

https://hub.docker.com/r/netlify/build

However, as far as I’m aware, that cannot be used to deploy to production.

About the issue, since the old logs are not available any more, could any one of you provide us with a recent reproduction? We want to confirm if the log messages are same as the previous issues to hopefully steer this in the right direction.

50

Yes, I’ve just tried and the issue persists. Here is the deploy that has the images throwing the discussed error:

Failed to load resource: the server responded with a status of 500 ()

CNG Lawyers - Home (62abc3c0ce19d452e0369bba–cng-lawyers.netlify.app)

C6A0F6

If anything else is needed or I can be of any assistance, I’m happy to help.

52

Thank you very much for that reproduction. We’ll run this by the engineers once again this week to ask about the updates.

54

Is this of any use to your team? We are having a similar issue and are unsure how to resolve it. (See IPX error here)

57

I have the same error.

This is the image defined in the HTML

   <Image
        src="/img/main.png"
        alt="background main"
        layout="fill"
        objectFit="cover"
        objectPosition="60% 30%"
        onLoadingComplete={() => setImageLoad(true)}
      />

I have this error in the network:

1. errorMessage: "Error: Cannot find module './utils'\nRequire stack:\n- /var/task/node_modules/unstorage/dist/drivers/fs.cjs\n- /var/task/node_modules/@netlify/ipx/dist/http.js\n- /var/task/node_modules/@netlify/ipx/dist/index.js\n- /var/task/.netlify/functions-internal/_ipx/_ipx.js\n- /var/task/_ipx.js\n- /var/runtime/UserFunction.js\n- /var/runtime/Runtime.js\n- /var/runtime/index.js"
2. errorType: "Runtime.ImportModuleError"
58

@hrishikesh And I also noticed that the svg file works fine and png is not working and showing the 500 error. FYI, thanks for the help.