Image function times out without logging any error

[gavinhenderson]

Describe the bug
Requesting an image times out but doesn't say why

Repo: https://github.com/AceCentre/acecentre.org.uk
Hosted: https://acecentreorguk.netlify.app/

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://acecentreorguk.netlify.app'
2. Wait ~10 seconds
3. Scroll down see images dont load
4. Check network tab in console
5. See 502 responses with server timeout
6. Check function logs and see nothing besides the timeout message

Expected behavior

• Logs explaining why its hanging
• A way to override the function (to add logs)
• The function doesn't hang

Versions

• Next.js: 11.0.1
• plugin (if installed at fixed version): 3.4.2

If you're using the CLI to build

• OS: [e.g. macOS, Windows]: Linux
• netlify/cli version: 3.38.7

[gavinhenderson]

You might see some mixed content warnings, ignore those, thats a separate issue on my side

[surjithctly]

I can also see images are loading as 301 redirect instead of rendering it as webp on modern browsers.

Also, This plugin does not work well with next 11 image import

import heroImg from "../public/img/hero.png" This also causes some errors like Timeouts, mixed content warnings etc..

[gavinhenderson]

The 301 seems like the intended behaviour of the plugin. It doesn't override the loader, instead it just redirects from the default next path to the custom function. The request made subsequent to the redirect is the one that times out

I've avoided using any next11 imports as I assumed they wouldnt be supported yet.

[ascorbic]

Thanks for the report. I'm investigating now. However can I suggest that you start by converting your hero image from png to jpg. It's 2.4MB, and by default we'll keep the same format as the input file.

[ascorbic]

Unfortunately I can't build your site, because I don't have acess to redis. I'm going to look into adding better error handling. Could you try running it locally, via netlify dev, and see if you get an error message.

[surjithctly]

@ascorbic Would be great if the docs are updated on what Next 11 features are supported and not. It would avoid any confusion.

This issue exists on some SVG files as well. Any next 11 site would work.

[ascorbic]

All the Next 11 features should work. SVG files and GIFs are returned unchanged.

[surjithctly]

SVG with Next 11 import throws error when hosted on netlify. I guess it has to do something with ../public and /img since its different in both scenario.

[NoahBres]

@ascorbic Do you need another sample to try and reproduce this issue? Most of the images in our site do not work with next 11 images and run into this timeout issue.

[ascorbic]

Can you try installing 3.5.0 and see if that fixes it?

[NoahBres]

That did not seem seem to change anything.

Uninstalling the plugin, reinstalling, and clearing the build cache and redeploying should have used the latest version right? I did not specify a version in netlify.toml

[lindsaylevine]

@NoahBres no, currently we're autoinstalling at 3.4.2. you need to manually npm install --save @netlify/plugin-nextjs@3.5.0 to enforce that version. itll show you in the build/deploy logs which plugin version you're using.