Nextjs images 502 responses

I’m working on a site and all images used by the next/images component return this error:

{"errorType":"Runtime.ImportModuleError","errorMessage":"Error: Cannot find module 'ipx'\nRequire stack:\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/index.js","trace":["Runtime.ImportModuleError: Error: Cannot find module 'ipx'","Require stack:","- /var/task/node_modules/@netlify/ipx/dist/index.js","- /var/task/.netlify/functions-internal/_ipx/_ipx.js","- /var/task/_ipx.js","- /var/runtime/UserFunction.js","- /var/runtime/index.js"," at _loadUserApp (/var/runtime/UserFunction.js:202:13)"," at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)"," at Object.<anonymous> (/var/runtime/index.js:43:30)"," at Module._compile (internal/modules/cjs/loader.js:1085:14)"," at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)"," at Module.load (internal/modules/cjs/loader.js:950:32)"," at Function.Module._load (internal/modules/cjs/loader.js:790:12)"," at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)"," at internal/main/run_main_module.js:17:47"]}

The site is guildmasters.io (or guildmasters.netlify.app).

This is a copy+paste version of another project that has previously built successfully. I’ve tried upgrading @netlify/plugin-nextjs dependency to latest and bringing it to the exact same version that’s running on another web, but to no avail.

Please help :pray:

4 Likes

We are also experiencing this issue.

1 Like

This is happening on our sites too. Only the ones that have been built in the last hour or so. What changed, Netlify?

for what it’s worth, this seemed to fix it for me:

yarn add --dev @netlify/ipx netlify-plugin-ipx

though, that is a terrible solution. but in case it helps anyone else until Netlify Answers…

The images were working fine on my previous deployment but I deployed some changes today and the images are not showing now. What happened? It returns following error

  1. 0: “Runtime.ImportModuleError: Error: Cannot find module ‘ipx’”
  2. 1: “Require stack:”
  3. 2: “- /var/task/node_modules/@netlify/ipx/dist/index.js”
  4. 3: “- /var/task/.netlify/functions-internal/_ipx/_ipx.js”
  5. 4: “- /var/task/_ipx.js”
  6. 5: “- /var/runtime/UserFunction.js”
  7. 6: “- /var/runtime/index.js”
  8. 7: " at _loadUserApp (/var/runtime/UserFunction.js:202:13)"
  9. 8: " at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)"
  10. 9: " at Object. (/var/runtime/index.js:43:30)"
  11. 10: " at Module._compile (internal/modules/cjs/loader.js:1085:14)"
  12. 11: " at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)"
  13. 12: " at Module.load (internal/modules/cjs/loader.js:950:32)"
  14. 13: " at Function.Module._load (internal/modules/cjs/loader.js:790:12)"
  15. 14: " at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)"
  16. 15: " at internal/main/run_main_module.js:17:47"

@mfan Solution seems to be a temp patch until Netlify fixes the issue.

Hey folks!

Thanks so much for reaching out. If you haven’t already, could you share the URL to your site, the full error message you are seeing, and your project repo / a reproduction? I am sharing this with the relevant teams, and they would like to reproduce this on their end.

Thanks Hillary for reaching out.
URL: https://next-mellow.netlify.app/
Error:
0: “Runtime.ImportModuleError: Error: Cannot find module ‘ipx’”
1: “Require stack:”
2: “- /var/task/node_modules/@netlify/ipx/dist/index.js”
3: “- /var/task/.netlify/functions-internal/_ipx/_ipx.js”
4: “- /var/task/_ipx.js”
5: “- /var/runtime/UserFunction.js”
6: “- /var/runtime/index.js”
7: " at _loadUserApp (/var/runtime/UserFunction.js:202:13)"
8: " at Object.module.exports.load (/var/runtime/UserFunction.js:242:17)"
9: " at Object. (/var/runtime/index.js:43:30)"
10: " at Module._compile (internal/modules/cjs/loader.js:1085:14)"
11: " at Object.Module._extensions…js (internal/modules/cjs/loader.js:1114:10)"
12: " at Module.load (internal/modules/cjs/loader.js:950:32)"
13: " at Function.Module._load (internal/modules/cjs/loader.js:790:12)"
14: " at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)"
15: " at internal/main/run_main_module.js:17:47"

All the images added with next/image component show this error. Background images are fine.

Doesn’t seem to work for us, did you add anything else or just ran this?

Hello everyone! Thanks for the reports. We tracked this down to a problem in the latest version of ipx, which we reported to them and they quickly fixed. If you run npm update ipx it should upgrade it to 0.9.4, which should fix it. Thanks for your patience.

3 Likes

Wanted to add to @ascorbic’s “fix.”

My project images worked perfectly before and I never included the ipx npm module. I did not and still have not included npm install ipx nor npm install --dev @netlify/ipx netlify-plugin-ipx. I tried to redeploy my website after the supposed “fix,” but was still presented with a 502 error with the same exact error message as @billyX007.

I then found the fix. For my project it was due to my “Build image selection” (under Site settings → Build & deploy → Build image selection) being set to Ubunto Xenial 16.04. I then switched it to the most recent build image Ubunto Focal 20.04 and now the images are displayed correctly with no server errors.

Hope this helps anyone that doesn’t have the npm ipx module installed like I did!

1 Like

Thanks so much for chiming in, @gs291 :wave:! I am so glad to hear you have everything working now.

For other folks who may not have Ubuntu Focal installed, you can read more in our changelog: build-image/CHANGELOG.md at focal · netlify/build-image · GitHub

1 Like

Hi, I’m having a similar issue to this - please let me know if I should open a separate ticket instead.

I have a NextJS site on Netlify, and when I use edge functions, I get a 502 response on the image on the site. I’ve tried what’s recommended here:

  • installed ipx@latest
  • installed @netlify/ipx
  • installed @netlify/plugin-nextjs
  • confirmed I’m on the most recent build image

I’ve deployed the site twice, once with edge functions and once without. Both are behaving not as I would expect.

With Edge Functions

I get a long delay and then a 502

Without Edge Functions

The image is returned, but it’s the original jpeg, not transcoded to webp or avif as configured.


The repository is here. I’m out of ideas to try, so any thoughts would be greatly appreciated!

Hey @hughrawlinson,

The without edge function is expected behaviour. You’ll always get a JPG without Edge Functions because we don’t support content-negotiation without Edge Functions.

About the issue with Edge Functions, the problem appears to be with the size of the image. The source image is a huge 5k pixel wide image and AVIF is a resource-hungry format. So, resizing into AVIF takes longer than 10 seconds (which is the timeout for Netlify Functions).

2 Likes

Hey Hrishikesh,

Thanks for clarifying! I had missed that the function was timing out because I don’t get any logs in the Edge Functions tab of my dashboard, but after checking the Functions tab, I can see that the _ipx function (for the copy of the site with edge functions enabled) is timing out.

I’ve also squooshed the image down to 433k, which seems more reasonable - but it still seems to be timing out. I’ve disabled avif in next.config.js, so now it should only be trying to encode webp. Are there any benchmarks for transcoding in edge functions? It’d be great to have a more solid understanding of what I should expect from them so that I can make sure content is ready for them.

Regarding benchmarks, I don’t believe we have any, but I can take this to the team and come back with some confirmation in the coming week.

Yeah, we don’t have any benchmarks at the moment as there are many variables and the team has not been able to allocate bandwidth to such a thing.

production : https://takip.normod.com/
demo: https://deploy-preview-65--takipnormod.netlify.app/
Even of I didn’t touch anything related to footer social icons, now they are blank in demo site. How to solve that issue?Because of that issue I don’t deploy necessary change to production site and it’s effecting the business. Needing help!

Solved!
The issue is somehow related to ipx and next/image. While bundling the ""es ipx is used and sometimes out of control it’s not working as expected.
Solution: Instead of using next/image Image component ,use native html img.