1

I was using the default component to optimize images in my Next JS app but found out that the site can't be hosted anywhere else apart from Vercel if the default Image Optimization component is used. Apart from that, the site can't also be exported to be hosted on other web hosting platforms.

The drawbacks with the inbuilt Image Component led me to the next-optimized-images package which includes image optimization and other benefits as the inbuilt Next Image component.

It requires me to create a babel.rc with the following configuration:

{
  "presets": ["next/babel"],
  "plugins": ["react-optimized-image/plugin"]
}

I also modified my next.config.js to the following:

const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages({
  /* config for next-optimized-images */

  // your config for other plugins or the general next.js here...
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"]
    });

    return config;
  },
  reactStrictMode: true,
});

The next-optimized-image inbuilt Img component can be utilized like this:

import Img from 'react-optimized-image';
// react-optimized-image is specified in the docs explicitly
import HeroImage from '../../../public/images/dashboard-on-mobile-and-desktop-screen.png'

export default function Hero(){
  return (
    <>
      <Img  src={HeroImage} sizes={[614]}/>
    </>
  )
}

After doing all these and I run npm run dev, I get the following errors in my console:

(node:22516) UnhandledPromiseRejectionWarning: Error: Input buffer contains unsupported image format
(Use `node --trace-warnings ...` to show where the warning was created)
(node:22516) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by 
rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
(node:22516) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

How do I fix this problem? Thanks in advance

Idris
  • 558
  • 7
  • 29
  • Does this answer your question: [Nextjs: TypeError: unsupported file type: undefined after update to v.11](https://stackoverflow.com/questions/68008498/nextjs-typeerror-unsupported-file-type-undefined-after-update-to-v-11)? Try adding `images: { disableStaticImages: true }` to your `next.config.js`. – juliomalves Sep 29 '21 at 18:49

1 Answers1

0

I was having the same issue with a PNG image.

First, I just opened it with Paint and saved it again as PNG. I could see something had changed with git, but I was still getting the same error.

Then, I opened it with Gimp and exported it again as PNG and it worked.

Danziger
  • 19,628
  • 4
  • 53
  • 83