Module Build Error: pngquant ENOENT - webpack build succeeds on local OS X, fails on AWS Ubuntu 16.04 server

Question

I've tried to find the answer all over, but it just doesn't seem to be out there yet.

I'm using React-Toolbox, React-Bootstrap and some custom scss. On my local machine, the build works fine. When I spin up an AWS Ubuntu server and do a basic node production setup, the build fails on my images.

I'm using Image-Webpack-Loader. I'm chaining this on the file-loader.

Here is my production webpack file (Any tips on this are also super appreciated. Always down to learn)

let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
const autoprefixer = require('autoprefixer');
const modulesPath = path.join(__dirname, 'node_modules');

var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

var WebpackEnvPlugin = new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
  PORT: JSON.stringify(process.env.PORT)
});

module.exports = {
  entry: [
  './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js',
    publicPath: '/assets'
  },
  postcss: [autoprefixer],
  resolve: {
    extensions: ['', '.css', '.scss', '.js', '.json'],
  },
  module: {
    loaders: [
      {
        test: /(\.js)$/,
        exclude: /node_modules/,
        loaders: ['babel']
      },
      { test: /\.css$/,
        exclude : path.join(__dirname, '/node_modules/react-toolbox/'),
        loader: ExtractTextPlugin.extract("style-loader, css-loader!autoprefixer-loader") },
      {
        test: /\.scss$/,
        exclude : path.join(__dirname, '/node_modules/react-toolbox/'),
        loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
      },
      {
        test    : /(\.scss|\.css)$/,
        include : path.join(__dirname, '/node_modules/react-toolbox/'),
        loaders : [
          require.resolve('style-loader'),
          require.resolve('css-loader') + '?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          require.resolve('sass-loader') + '?sourceMap'
        ]
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  plugins: [
  HtmlWebpackPluginConfig,
  WebpackEnvPlugin,
  new ExtractTextPlugin('css/main.css', {
            allChunks: true
        }),
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.UglifyJsPlugin()
  ]
}

I've read that by lowering the pngquant quality, that the issue would possibly be resolved, but I've had no such luck.

I get these sort of errors when I build for my different images:

ERROR in ./app/images/logo.png
Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT
    at exports._errnoException (util.js:1022:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:359:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
 @ ./app/modules/listingpage/listingpage-component.js 55:11-43

an error for where I'm including my main.scss file in my index.js.

ERROR in ./app/stylesheets/scss/main.scss
Module build failed: ModuleBuildError: Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT
    at exports._errnoException (util.js:1022:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:359:16)
    at _combinedTickCallback (internal/process/next_tick.js:74:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at DependenciesBlock.onModuleBuildFailed (/var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:315:19)
    at nextLoader (/var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:270:31)
    at /var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15
    at context.callback (/var/www/project/node_modules/webpack-core/lib/NormalModuleMixin.js:148:14)
    at imagemin.buffer.then.catch.err (/var/www/project/node_modules/image-webpack-loader/index.js:42:9)
 @ ./app/index.js 30:0-39

And an error I believe having to do with loaders:

ERROR in ./app/images/magnifying-glass.png
    Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT
        at exports._errnoException (util.js:1022:11)
        at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
        at onErrorNT (internal/child_process.js:359:16)
        at _combinedTickCallback (internal/process/next_tick.js:74:11)
        at process._tickCallback (internal/process/next_tick.js:98:9)
     @ ./~/css-loader!./~/autoprefixer-loader!./~/sass-loader!./app/stylesheets/scss/main.scss 6:6846-6890

I'm including my images using the following format:

const logo =  require('../../images/logo.png');

Lastly, here are my package.json dependencies:

  "dependencies": {
    "async": "^2.0.1",
    "autoprefixer": "^6.5.1",
    "autoprefixer-loader": "^3.2.0",
    "axios": "^0.14.0",
    "babel-cli": "^6.16.0",
    "babel-core": "^6.16.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-syntax-object-rest-spread": "^6.13.0",
    "babel-plugin-transform-class-properties": "^6.16.0",
    "babel-plugin-transform-object-rest-spread": "^6.16.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-polyfill": "^6.16.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-register": "^6.16.3",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.15.2",
    "bootstrap": "^3.3.7",
    "classnames": "^2.2.5",
    "compression": "^1.6.2",
    "cookie-parser": "^1.4.3",
    "css-loader": "^0.25.0",
    "csv": "^1.1.0",
    "dotenv": "^2.0.0",
    "express": "^4.14.0",
    "express-flash": "0.0.2",
    "express-session": "^1.14.1",
    "file-loader": "^0.9.0",
    "glob": "^7.1.0",
    "html-webpack-plugin": "^2.22.0",
    "image-webpack-loader": "^2.0.0",
    "immutability-helper": "^2.0.0",
    "jquery": "^3.1.1",
    "jwt-simple": "^0.5.0",
    "later": "^1.2.0",
    "lodash": "^4.16.3",
    "moment": "^2.15.1",
    "mongoose": "^4.6.1",
    "morgan": "^1.7.0",
    "multer": "^1.2.0",
    "nodemon": "^1.11.0",
    "postcss-loader": "^0.13.0",
    "raw-loader": "^0.5.1",
    "react": "^15.4.1",
    "react-addons-css-transition-group": "^15.3.2",
    "react-bootstrap": "^0.30.5",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.8.1",
    "react-router-bootstrap": "^0.23.1",
    "react-test-renderer": "^15.4.1",
    "react-toolbox": "^1.2.3",
    "redbox-react": "^1.3.1",
    "redux": "^3.6.0",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.1.0",
    "request": "^2.75.0",
    "rimraf": "^2.5.4",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2"
  },
  "devDependencies": {
    "babel-eslint": "^7.0.0",
    "babel-jest": "^15.0.0",
    "babel-preset-es2015": "^6.16.0",
    "chai": "^3.5.0",
    "css-loader": "^0.25.0",
    "eslint": "^3.12.2",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.2",
    "eslint-plugin-react": "^6.3.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "image-webpack-loader": "^2.0.0",
    "jest": "^15.1.1",
    "jest-cli": "^15.1.1",
    "json-loader": "^0.5.4",
    "mocha": "^3.1.0",
    "node-sass": "^3.10.1",
    "raw-loader": "^0.5.1",
    "react-addons-test-utils": "^15.3.2",
    "redbox-react": "^1.3.1",
    "redux-logger": "^2.6.1",
    "sass-loader": "^4.0.2",
    "toolbox-loader": "0.0.3",
    "url-loader": "^0.5.7",
    "webpack-dev-server": "^1.16.1"
  }

I've tried reinstalling my packages, just reinstalling Image-Webpack-Loader, all of the basic things to do. Once again, builds fine locally, doesn't build on server. I'm just not sure what I'm doing wrong at this point. Thanks in advance for your help!

Answer 1

Just as Rohn John says, I install pngquant and optipng on my machine and solve the problem

sudo apt-get install pngquant optipng
mkdir -p node_modules/pngquant-bin/vendor/
mkdir -p node_modules/optipng-bin/vendor/
ln -s /usr/bin/pngquant node_modules/pngquant-bin/vendor/pngquant
ln -s /usr/bin/optipng node_modules/optipng-bin/vendor/optipng

and I tested that use yarn can do the same and easier:

yarn add pngquant
yarn add optipng
yarn add cjpeg

Answer 2

Image loader depends on pngquant binary.

When pngquant-bin npm module is installed it compiles pngquant binary using g++, make, bash, zlib-dev and libpng-dev.

It is unfortunate that the error messages are not clear enough and you're only graced with an unhelpful one.

Make sure to run the following before npm install or yarn install.

apk --no-cache update \ 
&& apk --no-cache add make bash g++ zlib-dev libpng-dev \
&&  rm -fr /var/cache/apk/*

You may replace installing g++ zlib-dev with build-base instead.

Answer 3

Seems like pngquant installation had encountered on some problems. The error message "Module build failed: Error: spawn /var/www/project/node_modules/pngquant-bin/vendor/pngquant ENOENT" means can not find pngquant in node_modules/pngquant-bin/vendor/.

You can try reinstall pngquant or some other npm packages depend on pngquant.

Moreover you should check if your Ubuntu server has pngquant installed.