need an appropriate loader to handle this file type

[SanskarSans]

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:https://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

[SanskarSans]

seems like its hard to get support from the team. Will look at next-images instead as i am short of time.

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

[sospedra]

I ran into the same issue and the problem was not this library.
This is a webpack error regarding how to handle different file types.

In my case, I was reading .md files and processing them static alongside with grey-matter and remark. So far so good.

But then I added this lib and the warning appeared. That's because this lib is finding the special require (such as require('/file.png?svg')) through loaders and thus webpack also found some unknown .md files.

How did I fix it?

1. Identify in which unknown files you're using the special requires of next-optimized-images
2. Add a raw-loader rule for webpack:

    config.module.rules.push(
      {
        test: /\.md$/, // your extension
        use: 'raw-loader'
      }
    )

Hope it helps

[heymartinadams]

Awesome, thanks @sospedra 🎉

For multiple file types:

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

[mailightkun]

I'm experiencing same error, even i tried @sospedra suggestion, still, PWA will not generate when withOptimizeIMages is at the top like below

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

if i change the position, then ill encounter again the same error..