I tried to find the answer all over, but it does not seem to exist yet.
I use React-Toolbox, React-Bootstrap and some custom scss. On my local machine, the assembly works fine. When I deploy the AWS Ubuntu server and do the basic production setup for node, the assembly does not work on my images.
I am using Image-Webpack-Loader. I bind this to the file loader.
Here is my webpack file for production (any advice on this is also very appreciated).
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 read that by lowering the quality of pngquant, the problem can be solved, but I did not have such luck.
I get these errors when I create 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
error for where I include the 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 the error that I think is related to bootloaders:
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 include my images in the following format:
const logo = require('../../images/logo.png');
Finally, 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 tried reinstalling my packages by simply reinstalling Image-Webpack-Loader, all the basic things to do. Once again, it builds fine locally, not built on the server. I'm just not sure what I'm doing wrong at this moment. Thanks in advance for your help!