Cannot find module 'gifsicle' for loading image -webpack

Question

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',
                }
            },
        ],
    },

Dattaya · Accepted Answer · 2022-04-22T14:29:34.437

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:

Actually I solved it a long ago but forgot to answer here. And this is exactly how I solved the problem. In my case, the another problem is that we were using different version of node and npm. We've updated it to the same version and it got solved. Thank you for your kindly help. — Jerry_0x04bc, Dec 30 '20 at 13:01

Cannot find module 'gifsicle' for loading image -webpack

1 Answers1

Answer for image-webpack-loader@8

Previous answer