Search code examples
webpackwebpack-dev-serverwebpack-style-loaderwebpack-loader

Cannot find module 'gifsicle' for loading image -webpack

I've created a webpack project. In that my project works on my machine, but in all of my teammates laptop who has ubuntu installed on their machine(mine is zorin - a ubuntu based distro), if he uses an image in the project the dev-server throws the following error. But I can use image in the same project on my machine. I couldn't figure out what the problem is.

ERROR in ./images/favicon.png
Module build failed (from ../node_modules/image-webpack-loader/index.js):
Error: Cannot find module 'gifsicle'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.Module._load (internal/modules/cjs/loader.js:562:25)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/ranjith/Desktop/project/FORTRAN/node_modules/imagemin-gifsicle/index.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
 @ ./index.html (../node_modules/html-webpack-plugin/lib/loader.js!./index.html) 3:33-64

This is my code

.mainLogo {
  background: url('../../images/logo/logo_mini_dark.jpg');
  background-repeat: no-repeat;
  width: 3rem;
  height: 3rem;
}


Here is my webpack configuration for images

   {
        test: /\.(gif|png|svg|jpeg|jpg)$/i,
        exclude: /fonts/,
        use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[name].[contenthash].[ext]',
                    outputPath: 'images',
                }
            },
            {
                loader: 'image-webpack-loader',
                options: {
                    name: '[name].[contenthash].[ext]',
                    outputPath: 'images',
                }
            },
        ],
    },
Solution

  • Answer for image-webpack-loader@8

    Just like their readme explains, to install it (and to build gifsicle it depends on), node alpine requires this script:

    RUN apk add --no-cache autoconf automake file g++ libtool make nasm libpng-dev

    Node Buster Slim:

    RUN apt-get update && apt-get install -y --no-install-recommends autoconf automake g++ libpng-dev make

    Node Buster - no additional preparations, the image size is big, but if you have a multistage docker build, usually it's 'builder', 'remover', and 'production', then buster is also not a bad choise.

    Previous answer

    Based on a quick google search there seem to be only two options:

    • Installing dh-autoreconf which you might not like if you're using containers as it's huge for a container (then run npm install again so gifsicle is recompiled):
        $ apt-get install dh-autoreconf
    • Pinning gifsicle to v4.0.1 in package.json:
        "resolutions": {
        "gifsicle": "4.0.1"
      }     
    }

    "resolutions" yet to be supported by npm (unlike yarn), you'll need to install npm-force-resolutions (won't work with npm 7) as well.

    Sources: