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.
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.
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.
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.