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

javascript reactjs sass webpack pngquant
Dan Molitor picture Dan Molitor · Jan 2, 2017 · Viewed 8.4k times · Source

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

Yu Jiaao picture Yu Jiaao · Jul 28, 2017

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

Related questions

Module not found: Can't resolve 'style'

I am trying to configure css modules using sass. I have followed some tutorials but none seem to work. The webpack config was mostly created by create-react-scripts. I seemed to getting this error "Module not found: Can't resolve 'style'" Any …

Read More
Loop inside React JSX

I'm trying to do something like the following in React JSX (where ObjectRow is a separate component): <tbody> for (var i=0; i < numrows; i++) { <ObjectRow/> } </tbody> I realize and understand why this isn't …

Read More
"SyntaxError: Unexpected token < in JSON at position 0"

In a React app component which handles Facebook-like content feeds, I am running into an error: Feed.js:94 undefined "parsererror" "SyntaxError: Unexpected token < in JSON at position 0 I ran into a similar error which turned out to be a …

Read More