Images are failing to be served (502 Error) using next/image

[bencodesall]

Describe the bug
Using the next.js <Image /> component (next/image) my builds run perfectly. However I have a webp that is in the next public folder for my site logo which is failing to load on the page itself. I'm getting a 502 Bad Gateway error, but there's nothing in the build logs to indicate any problems.

To Reproduce
Steps to reproduce the behavior:

1. Trigger build (preview, develop, production all exhibit the same behavior)

Expected behavior
I expect the @netlify/plugin-nextjs build plugin to enable Nextjs image optimization to just work, and be served in kind.

Versions

• Next.js: 10.0.8
• plugin (if installed at fixed version): Installed in TOML file below

If you're using the CLI to build
N/A - Build (dev, prod, export ... all) working locally

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

If you're using file-based installation

• netlify.toml:

[build]
base = "/"
publish = "out/"
command = "yarn build"

## functions = "functions/"

[[plugins]]
package = "@netlify/plugin-nextjs"

[context.production]
publish = "out/"
command = "yarn build"

[context.deploy-preview]
publish = "out/"
command = "yarn build"

Additional Information
On a whim I did a direct GET and got back the following error on the image asset. This error leads me to believe there's something falling down on the server (or CDN) side that is failing to serve the image.

{
errorType: "Error",
errorMessage: "Unsupported MIME type: image/webp",
trace: [
"Error: Unsupported MIME type: image/webp",
" at Jimp.throwError (/var/task/src/node_modules/@jimp/utils/dist/index.js:33:13)",
" at Jimp.parseBitmap (/var/task/src/node_modules/@jimp/core/dist/utils/image-bitmap.js:198:32)",
" at Jimp.parseBitmap (/var/task/src/node_modules/@jimp/core/dist/index.js:431:32)",
" at /var/task/src/node_modules/@jimp/core/dist/index.js:373:15",
" at /var/task/src/node_modules/@jimp/core/dist/index.js:115:14",
" at /var/task/src/node_modules/@jimp/core/dist/request.js:48:9",
" at IncomingMessage.<anonymous> (/var/task/src/node_modules/phin/lib/phin.compiled.js:1:2100)",
" at IncomingMessage.emit (events.js:326:22)",
" at endReadableNT (_stream_readable.js:1241:12)",
" at processTicksAndRejections (internal/process/task_queues.js:84:21)"
]
}

[bencodesall]

Is WebP not one of the supported types in jimp? Hmmm ... is that correct? Seems like if that's the case it could be a marginally trivial alternative to implement a type check then somehow use an alternate function for WebP's? Sqoosh/CLI maybe? A buddy of mine did some build time webp conversions on another project but I can't remember the module he was using. I'll reach out and see if I can pick his brain.

[bencodesall]

For reference here's my last "succeeding" build that didn't like the next/image with webp. Tried switching file to png and viola. So I believe it's a jimp issue. Still very sad ... 👎 Any workarounds? Or am I totally turned around on this?

9:35:25 PM: Build ready to start
9:35:27 PM: build-image version: 3571f0130496395a23bffe9820bc78b4f73a6234
9:35:27 PM: build-image tag: v3.7.0
9:35:27 PM: buildbot version: c469f7ab4d394d961ca036b1163fdbb6ef9fb78c
9:35:27 PM: Fetching cached dependencies
9:35:27 PM: Failed to fetch cache, continuing with build
9:35:27 PM: Starting to prepare the repo for build
9:35:28 PM: No cached dependencies found. Cloning fresh repo
9:35:28 PM: git clone https://github.com/TYJ-Software-Inc/tyjsoftware.net
9:35:29 PM: Preparing Git Reference pull/22/head
9:35:30 PM: Different build dir detected, going to use the one specified in the Netlify configuration file: '' versus '/' in the Netlify UI
9:35:30 PM: Different functions path detected, going to use the one specified in the Netlify configuration file: 'functions' versus '' in the Netlify UI
9:35:30 PM: Different build command detected, going to use the one specified in the Netlify configuration file: 'yarn build' versus 'yarn prod:static' in the Netlify UI
9:35:31 PM: Starting build script
9:35:31 PM: Installing dependencies
9:35:31 PM: Python version set to 2.7
9:35:32 PM: v12.18.0 is already installed.
9:35:32 PM: Now using node v12.18.0 (npm v6.14.4)
9:35:32 PM: Started restoring cached build plugins
9:35:32 PM: Finished restoring cached build plugins
9:35:32 PM: Attempting ruby version 2.7.1, read from environment
9:35:34 PM: Using ruby version 2.7.1
9:35:34 PM: Using PHP version 5.6
9:35:34 PM: Started restoring cached yarn cache
9:35:34 PM: Finished restoring cached yarn cache
9:35:34 PM: Installing yarn at version 1.22.4
9:35:34 PM: Installing Yarn!
9:35:34 PM: > Downloading tarball...
9:35:34 PM: [1/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz --> /tmp/yarn.tar.gz.hdQK3JHC8q
9:35:34 PM:   % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
9:35:34 PM:                                  Dload  Upload   Total   Spent    Left  Speed
9:35:34 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
9:35:34 PM:   0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
9:35:34 PM: 100    79  100    79    0     0    386      0 --:--:-- --:--:-- --:--:--   385
9:35:34 PM: 100    93  100    93    0     0    199      0 --:--:-- --:--:-- --:--:--   199
9:35:35 PM: 100   625  100   625    0     0    880      0 --:--:-- --:--:-- --:--:--   880
9:35:35 PM:  67 1215k   67  818k    0     0   790k      0  0:00:01  0:00:01 --:--:--  790k
9:35:35 PM: 100 1215k  100 1215k    0     0  1128k      0  0:00:01  0:00:01 --:--:-- 9688k
9:35:35 PM: [2/2]: https://yarnpkg.com/downloads/1.22.4/yarn-v1.22.4.tar.gz.asc --> /tmp/yarn.tar.gz.hdQK3JHC8q.asc
9:35:35 PM: 100    83  100    83    0     0   1754      0 --:--:-- --:--:-- --:--:--  1754
9:35:35 PM: 100    97  100    97    0     0   1256      0 --:--:-- --:--:-- --:--:--  1256
9:35:35 PM: 100   629  100   629    0     0   6059      0 --:--:-- --:--:-- --:--:--  6059
9:35:35 PM: 100  1028  100  1028    0     0   8790      0 --:--:-- --:--:-- --:--:--  8790
9:35:35 PM: > Verifying integrity...
9:35:35 PM: gpg: Signature made Mon 09 Mar 2020 03:52:13 PM UTC using RSA key ID 69475BAA
9:35:35 PM: gpg: Good signature from "Yarn Packaging <[email protected]>"
9:35:35 PM: gpg: WARNING: This key is not certified with a trusted signature!
9:35:35 PM: gpg:          There is no indication that the signature belongs to the owner.
9:35:35 PM: Primary key fingerprint: 72EC F46A 56B4 AD39 C907  BBB7 1646 B01B 86E5 0310
9:35:35 PM:      Subkey fingerprint: 6D98 490C 6F1A CDDD 448E  4595 4F77 6793 6947 5BAA
9:35:35 PM: > GPG signature looks good
9:35:35 PM: > Extracting to ~/.yarn...
9:35:35 PM: > Adding to $PATH...
9:35:35 PM: > Successfully installed Yarn 1.22.4! Please open another terminal where the `yarn` command will now be available.
9:35:35 PM: Started restoring cached node modules
9:35:35 PM: Finished restoring cached node modules
9:35:36 PM: Installing NPM modules using Yarn version 1.22.4
9:35:36 PM: yarn install v1.22.4
9:35:36 PM: [1/4] Resolving packages...
9:35:37 PM: [2/4] Fetching packages...
9:36:02 PM: info [email protected]: The platform "linux" is incompatible with this module.
9:36:02 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
9:36:02 PM: info [email protected]: The platform "linux" is incompatible with this module.
9:36:02 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
9:36:02 PM: [3/4] Linking dependencies...
9:36:02 PM: warning "@storybook/addon-actions > [email protected]" has incorrect peer dependency "react@^16.8.4".
9:36:02 PM: warning "@storybook/addon-actions > @storybook/api > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
9:36:02 PM: warning "@storybook/addon-actions > @storybook/api > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
9:36:02 PM: warning "@storybook/addon-actions > @storybook/api > @reach/router > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
9:36:02 PM: warning " > [email protected]" has unmet peer dependency "webpack@>=2".
9:36:02 PM: warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/core > @storybook/ui > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0-0 || ^16.0.0".
9:36:02 PM: warning "@storybook/addon-essentials > @storybook/addon-docs > @storybook/core > @storybook/ui > [email protected]" has incorrect peer dependency "react-dom@^0.14.0 || ^15.0.0-0 || ^16.0.0".
9:36:02 PM: warning " > @typescript-eslint/[email protected]" has unmet peer dependency "eslint@^5.0.0 || ^6.0.0 || ^7.0.0".
9:36:02 PM: warning "@typescript-eslint/eslint-plugin > @typescript-eslint/[email protected]" has unmet peer dependency "eslint@*".
9:36:02 PM: warning " > @typescript-eslint/[email protected]" has unmet peer dependency "eslint@^5.0.0 || ^6.0.0 || ^7.0.0".
9:36:15 PM: [4/4] Building fresh packages...
9:36:17 PM: Done in 40.63s.
9:36:17 PM: NPM modules installed using Yarn
9:36:17 PM: Started restoring cached go cache
9:36:17 PM: Finished restoring cached go cache
9:36:17 PM: go version go1.14.4 linux/amd64
9:36:17 PM: go version go1.14.4 linux/amd64
9:36:17 PM: Installing missing commands
9:36:17 PM: Verify run directory
9:36:19 PM: ​
9:36:19 PM: ────────────────────────────────────────────────────────────────
9:36:19 PM:   Netlify Build                                                 
9:36:19 PM: ────────────────────────────────────────────────────────────────
9:36:19 PM: ​
9:36:19 PM: ❯ Version
9:36:19 PM:   @netlify/build 9.9.5
9:36:19 PM: ​
9:36:19 PM: ❯ Flags
9:36:19 PM:   apiHost: api.netlify.com
9:36:19 PM:   cacheDir: /opt/build/cache
9:36:19 PM:   deployId: 604d766df9c0700008a23367
9:36:19 PM:   mode: buildbot
9:36:19 PM:   testOpts:
9:36:19 PM:     silentLingeringProcesses: ''
9:36:19 PM: ​
9:36:19 PM: ❯ Current directory
9:36:19 PM:   /opt/build/repo
9:36:19 PM: ​
9:36:19 PM: ❯ Config file
9:36:19 PM:   /opt/build/repo/netlify.toml
9:36:19 PM: ​
9:36:19 PM: ❯ Context
9:36:19 PM:   deploy-preview
9:36:19 PM: ​
9:36:19 PM: ❯ Installing plugins
9:36:19 PM:    - @netlify/[email protected]
9:36:36 PM: ​
9:36:36 PM: ❯ Loading plugins
9:36:36 PM:    - @netlify/[email protected] from netlify.toml
9:36:36 PM: ​
9:36:36 PM: ────────────────────────────────────────────────────────────────
9:36:36 PM:   1. onPreBuild command from @netlify/plugin-nextjs             
9:36:36 PM: ────────────────────────────────────────────────────────────────
9:36:36 PM: ​
9:36:36 PM: ​
9:36:36 PM: (@netlify/plugin-nextjs onPreBuild completed in 10ms)
9:36:36 PM: ​
9:36:36 PM: ────────────────────────────────────────────────────────────────
9:36:36 PM:   2. build.command from netlify.toml                            
9:36:36 PM: ────────────────────────────────────────────────────────────────
9:36:36 PM: ​
9:36:36 PM: $ yarn build
9:36:36 PM: yarn run v1.22.4
9:36:36 PM: $ next build
9:36:38 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache
9:36:38 PM: info  - Creating an optimized production build...
9:36:59 PM: warn  - Compiled with warnings
9:36:59 PM: ./node_modules/next/dist/next-server/server/load-components.js
9:36:59 PM: Critical dependency: the request of a dependency is an expression
9:36:59 PM: ./node_modules/next/dist/next-server/server/load-components.js
9:36:59 PM: Critical dependency: the request of a dependency is an expression
9:36:59 PM: ./node_modules/next/dist/next-server/server/require.js
9:36:59 PM: Critical dependency: the request of a dependency is an expression
9:36:59 PM: ./node_modules/next/dist/next-server/server/require.js
9:36:59 PM: Critical dependency: the request of a dependency is an expression
9:36:59 PM: ./node_modules/next/dist/next-server/server/require.js
9:36:59 PM: Critical dependency: the request of a dependency is an expression
9:36:59 PM: ./node_modules/node-fetch/lib/index.js
9:36:59 PM: Module not found: Can't resolve 'encoding' in '/opt/build/repo/node_modules/node-fetch/lib'
9:36:59 PM: info  - Collecting page data...
9:37:00 PM: info  - Generating static pages (0/6)
9:37:01 PM: info  - Generating static pages (1/6)
9:37:01 PM: info  - Generating static pages (2/6)
9:37:01 PM: info  - Generating static pages (4/6)
9:37:01 PM: info  - Generating static pages (6/6)
9:37:01 PM: info  - Finalizing page optimization...
9:37:01 PM: Page                              Size     First Load JS
9:37:01 PM: ┌ ○ /                             947 B          71.5 kB
9:37:01 PM: ├   /_app                         0 B            63.1 kB
9:37:01 PM: ├ ○ /404                          2.78 kB        65.8 kB
9:37:01 PM: ├ ○ /admin                        638 B          71.2 kB
9:37:01 PM: ├ λ /api/hello                    0 B            63.1 kB
9:37:01 PM: ├ ○ /associate                    640 B          71.2 kB
9:37:01 PM: └ ○ /client                       638 B          71.2 kB
9:37:01 PM: + First Load JS shared by all     63.1 kB
9:37:01 PM:   ├ chunks/commons.bedc0b.js      13.7 kB
9:37:01 PM:   ├ chunks/framework.ae602c.js    41.8 kB
9:37:01 PM:   ├ chunks/main.fed18c.js         6.33 kB
9:37:01 PM:   ├ chunks/pages/_app.9f7686.js   575 B
9:37:01 PM:   ├ chunks/webpack.50bee0.js      751 B
9:37:01 PM:   └ css/4e43d76ffb4b7cc90c22.css  289 B
9:37:01 PM: λ  (Lambda)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
9:37:01 PM: ○  (Static)  automatically rendered as static HTML (uses no initial props)
9:37:01 PM: ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
9:37:01 PM:    (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
9:37:02 PM: Done in 25.32s.
9:37:02 PM: ​
9:37:02 PM: (build.command completed in 25.5s)
9:37:02 PM: ​
9:37:02 PM: ────────────────────────────────────────────────────────────────
9:37:02 PM:   3. onBuild command from @netlify/plugin-nextjs                
9:37:02 PM: ────────────────────────────────────────────────────────────────
9:37:02 PM: ​
9:37:02 PM: ** Running Next on Netlify package **
9:37:02 PM: 🚀 Next on Netlify 🚀
9:37:02 PM: 🌍️ Copying public/ folder to out
9:37:03 PM: 💼 Copying static NextJS assets to out
9:37:03 PM: 💫 Setting up API endpoints as Netlify Functions in functions
9:37:03 PM: 💫 Setting up pages with getInitialProps as Netlify Functions in functions
9:37:03 PM: 💫 Setting up pages with getServerSideProps as Netlify Functions in functions
9:37:03 PM: 🔥 Copying pre-rendered pages with getStaticProps and JSON data to out
9:37:03 PM: 💫 Setting up pages with getStaticProps and fallback: true as Netlify Functions in functions
9:37:03 PM: 💫 Setting up pages with getStaticProps and revalidation interval as Netlify Functions in functions
9:37:03 PM: 🔥 Copying pre-rendered pages without props to out
9:37:03 PM: 🔀 Setting up redirects
9:37:03 PM: 🔀 Setting up headers
9:37:03 PM: ✅ Success! All done!
9:37:03 PM: ​
9:37:03 PM: (@netlify/plugin-nextjs onBuild completed in 1.1s)
9:37:03 PM: ​
9:37:03 PM: ────────────────────────────────────────────────────────────────
9:37:03 PM:   4. Functions bundling                                         
9:37:03 PM: ────────────────────────────────────────────────────────────────
9:37:03 PM: ​
9:37:03 PM: Packaging Functions from functions directory:
9:37:03 PM:  - next_image.js
9:37:03 PM:  - next_api_hello/next_api_hello.js
9:37:09 PM: ​
9:37:09 PM: (Functions bundling completed in 6.3s)
9:37:09 PM: ​
9:37:09 PM: ────────────────────────────────────────────────────────────────
9:37:09 PM:   5. Deploy site                                                
9:37:09 PM: ────────────────────────────────────────────────────────────────
9:37:09 PM: ​
9:37:09 PM: Starting to deploy site from 'out'
9:37:09 PM: Creating deploy tree 
9:37:09 PM: Creating deploy upload records
9:37:09 PM: 7 new files to upload
9:37:09 PM: 1 new functions to upload
9:37:10 PM: Site deploy was successfully initiated
9:37:10 PM: ​
9:37:10 PM: (Deploy site completed in 1.4s)
9:37:10 PM: Starting post processing
9:37:10 PM: ​
9:37:10 PM: ────────────────────────────────────────────────────────────────
9:37:10 PM:   Netlify Build Complete                                        
9:37:10 PM: ────────────────────────────────────────────────────────────────
9:37:10 PM: ​
9:37:10 PM: (Netlify Build completed in 51.9s)
9:37:11 PM: Post processing - HTML
9:37:11 PM: Caching artifacts
9:37:11 PM: Started saving node modules
9:37:11 PM: Finished saving node modules
9:37:11 PM: Started saving build plugins
9:37:11 PM: Finished saving build plugins
9:37:11 PM: Started saving yarn cache
9:37:11 PM: Finished saving yarn cache
9:37:11 PM: Started saving pip cache
9:37:11 PM: Finished saving pip cache
9:37:11 PM: Started saving emacs cask dependencies
9:37:11 PM: Finished saving emacs cask dependencies
9:37:11 PM: Started saving maven dependencies
9:37:11 PM: Finished saving maven dependencies
9:37:11 PM: Started saving boot dependencies
9:37:11 PM: Finished saving boot dependencies
9:37:11 PM: Started saving rust rustup cache
9:37:11 PM: Finished saving rust rustup cache
9:37:11 PM: Started saving go dependencies
9:37:11 PM: Finished saving go dependencies
9:37:11 PM: Post processing - header rules
9:37:11 PM: Post processing - redirect rules
9:37:11 PM: Post processing done
9:37:11 PM: Site is live ✨
9:37:13 PM: Build script success
9:37:38 PM: Finished processing build request in 2m10.918519192s

[bencodesall]

Closing this in favor of a feature request. However some build log indicating the jimp fail would be helpful ;)