need an appropriate loader to handle this file type

I am trying to configure my project with next-optimized-images for image part. However, I am getting the following error

This is my setup and its been two days and I have tried many solutions to no avail

const webpack = require("webpack");
const withPWA = require("next-pwa");
const withSass = require("@zeit/next-sass");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");
//const withImages = require("next-images");
const withPlugins = require("next-compose-plugins");
const withOptimizedImages = require("next-optimized-images");
const path = require("path");

const cssConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    camelCase: true,
    namedExport: true,
  },
};

const optimizedImagesConfig = {
  inlineImageLimit: 8192,
  mozjpeg: {
    quality: 80,
  },
  optipng: {
    optimizationLevel: 3,
  },
  pngquant: false,
  gifsicle: {
    interlaced: true,
    optimizationLevel: 3,
  },
  svgo: {
    // enable/disable svgo plugins here
  },
  webp: {
    preset: "default",
    quality: 75,
  },
};

const nextConfig = {
  webpack: (config, { dev }) => {
    config.plugins.push(new webpack.EnvironmentPlugin(process.env));

    config.resolve.alias["commons"] = path.join(__dirname, "src/commons");
    config.resolve.alias["components"] = path.join(__dirname, "src/components");
    config.resolve.alias["contexts"] = path.join(__dirname, "src/contexts");
    config.resolve.alias["constants"] = path.join(__dirname, "src/constants");
    config.resolve.alias["assets"] = path.join(__dirname, "src/assets");
    config.resolve.alias["gql"] = path.join(__dirname, "src/gql");
    config.resolve.alias["hooks"] = path.join(__dirname, "src/hooks");
    config.resolve.alias["static"] = path.join(__dirname, "src/static");

    return config;
  },
  poweredByHeader: false,
  serverRuntimeConfig: {
    NODE_ENV: process.env.NODE_ENV,
  },
  publicRuntimeConfig: {
    NODE_ENV: process.env.NODE_ENV,
    API_ENDPOINT: process.env.API_ENDPOINT || "http://localhost:3000",
    BUCKET_URI: process.env.BUCKET_URI,
    BUCKET_NAME: process.env.BUCKET_NAME,
  },
};

module.exports = withPlugins(
  [
    [withOptimizedImages, optimizedImagesConfig],
    [
      withPWA({
        pwa: {
          dest: "public",
        },
      }),
    ],
  ],
  nextConfig
);

I have following packages installed as well

"imagemin-mozjpeg": "^8.0.0",
 "imagemin-optipng": "^7.1.0",
 "imagemin-svgo": "^7.1.0",
 "webp-loader": "^0.6.0",
"lqip-loader": "^2.2.0",

I am importing or using the images in the below way

img: require("assets/images/banner-nav/everest.jpg"),

Did i miss anything to setup? please I am stuck since two days. Any help is highly appreciated.

Thanks

[heymartinadams]

Awesome, thanks @sospedra 🎉

For multiple file types:

config.module.rules.push({
	test: /(\.ttf|\.html)$/,
	use: 'raw-loader'
})

[heymartinadams]

Receiving a similar warning (not error) for ttf, txt, and html types.

If I don’t use next-optimized-images the warning goes away.

What’s strange, though, is that despite the warning, the font, text, and html files seem to get loaded.