Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

need an appropriate loader to handle this file type

See original GitHub issue

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],
        pwa: {
          dest: "public",

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.


Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:5

github_iconTop GitHub Comments

heymartinadamscommented, May 12, 2020

Awesome, thanks @sospedra 🎉

For multiple file types:

	test: /(\.ttf|\.html)$/,
	use: 'raw-loader'
heymartinadamscommented, May 7, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

"You may need an appropriate loader to handle this file type ...
js file is doing is importing react, but it seems like the 'babel-loader' is not working. I am using 'babel-loader' 6.0.0. javascript ·...
Read more >
Fix : You may need an appropriate loader to handle this file type
The “You may need an appropriate loader to handle this file type” error is encountered in the command prompt of Windows or Linux...
Read more >
You may need an appropriate loader to handle this file type ...
I'm having a problem configuring Webpack for Typescript and React. After running the NPM script: webpack serves ./webpack/webpack.config.ts ...
Read more >
You may need an appropriate loader to handle this ... - Reddit
I have used truncate function in my react project. Now i am getting this error in my terminal You may need an appropriate...
Read more >
CSS : You may need an appropriate loader to handle this file ...
CSS : You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found