Nuxt 2: Weird Error Unsupported MIME type: image/webp

Today I got error while building the Nuxt WebApp (SSR) trough npm run build command and this error seems weird because unrelated with the changes on the project.

> admin-ui@1.0.0 build /Users/kresna/my-nuxt-web
> nuxt build

Error: Unsupported MIME type: image/webp
    at Jimp.throwError (/Users/kresna/my-nuxt-web/node_modules/jimp-compact/dist/jimp.js:1:833)
    at Jimp.parseBitmap (/Users/kresna/my-nuxt-web/node_modules/jimp-compact/dist/jimp.js:1:125733)
    at Jimp.parseBitmap (/Users/kresna/my-nuxt-web/node_modules/jimp-compact/dist/jimp.js:1:8514)
    at /Users/kresna/my-nuxt-web/node_modules/jimp-compact/dist/jimp.js:1:7613
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:71:3) {
  methodName: 'constructor'
}
ℹ Production build
ℹ Bundling for server and client side
ℹ Target: server
✔ Builder initialized

ERROR  1

ERROR  1

ERROR  1

ERROR  1

ERROR  1

ERROR  1

ERROR  1 (repeated 11 times)   

As You can see, those errors are related to the unsupported mime processing for type of Webp, but there was no changes about the addition of Webp images, nor the icons or anything else.

So, to figure out how this thing can be happened, I started to switch back into some git histories and trying to run npm run build command, then found the stage where everything is fine to build the project.

The Problem

After some inspections, I found that there was a binary change to the static image at ~/static/icon.png, replaced with the same filename.

The error because this file is a non valid PNG image file (a. webp but renamed as .png), and is included on the Vue SFC. let say we have MyComponent.vue and placed inside the template like below.

<template>
  <img :src="~/static/icon.png" />
</template>

This makes the image file processed (and also optimized by Nuxt) during the build process. After change this file with another valid png image, and re-run the the build process, the build is now works like a charm.