Can't set up next-optimized-images

[subhasishdas159]

I'm trying to set up next-optimized-images 2.6.2 with next js 9.3.6, after this I'd like to do "next build" and "next export" and generate a static site. After this I hope to host it with amazon S3. I would like next-optimized-images optimize the images while developing too.

My next.config.js file looks like

const withPlugins = require('next-compose-plugins')
const optimizedImages = require('next-optimized-images')
const withSass = require('@zeit/next-sass')
const withCSS = require('@zeit/next-css')
const path = require('path')

module.exports = withPlugins(
  [
    [withSass],
    [
      optimizedImages,
      {
        optimizeImagesInDev: true
      }
    ],
    [withCSS]
  ],
  {
    webpack (config, options) {
      config.resolve.modules.push(path.resolve('./'))
      return config
    }
  }
)

I have also installed the following Optimization Packages

"image-trace-loader": "^1.0.2",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^8.0.0",
"webp-loader": "^0.6.0",

I have both webp and png images in my code which I'm importing this way

import infoImage1 from 'assets/img/pages/covid/infoImage1.png'

After doing it, when I run "npm run dev" it shows "[ event ] build page: /home" and then nothing else happens, except for the cursor just blinks.

In the chrome browser When I try to go to localhost, the page doesn't load. It just shows the loading spinner which keeps spinning anticlockwise on the tab. Nothing appears on the page.

No error message is shown either in the browser console or in the terminal .

Can anyone please tell me where I'm doing wrong and how to make next-optimized-images work with next js in a static site setup?

Thanks in advance!