Cannot build node modules when deploying React app to Heroku - node.js

Question

Before I start I should state I've only been coding for 6months, so please forgive any rookie mistakes.
THE PROBLEM: I have been following this simple article on building a personal website with React.js, webpack and a node.js server. This is my first ever React project and the development phase has gone well enough. However, I have not been able to complete the last step outlined in the article i.e. building and deploying my application on Heroku.
The app works fine when I run it locally, so I assume the problem has something to do with the way I have configured the app for Heroku.
COMMAND LINE ERROR: With my Heroku remote ready to receive my app, I attempted to push my latest commit and received the following command line error:
$ git push heroku master ‹ruby-2.4.2›
Counting objects: 488, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (467/467), done.
Writing objects: 100% (488/488), 3.87 MiB | 463.00 KiB/s, done.
Total 488 (delta 252), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NPM_CONFIG_PRODUCTION=false
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 8.9.1
remote: engines.npm (package.json): 5.6.0
remote:
remote: Resolving node version 8.9.1...
remote: Downloading and installing node 8.9.1...
remote: Bootstrapping npm 5.6.0 (replacing 5.5.1)...
remote: npm 5.6.0 installed
remote:
remote: -----> Restoring cache
remote: Skipping cache restore (not-found)
remote:
remote: -----> Building dependencies
remote: Installing node modules (package.json + package-lock)
remote:
remote: > uglifyjs-webpack-plugin#0.4.6 postinstall/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/uglifyjs-webpack-plugin
remote: > node lib/post_install.js
remote:
remote:
remote: > cwebp-bin#4.0.0 postinstall/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/cwebp-bin
remote: > node lib/install.js
remote:
remote: ✔ cwebp pre-build test passed successfully
remote:
remote: > gifsicle#3.0.4 **strong text**postinstall/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/gifsicle
remote: > node lib/install.js
remote:
remote: ✔ gifsicle pre-build test passed successfully
remote:
remote: > mozjpeg#5.0.0 postinstall /tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg
remote: > node lib/install.js
remote:
remote: ⚠ The `/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor/cjpeg` binary doesn't seem to work correctly
remote: ⚠ mozjpeg pre-build test failed
remote: ℹ compiling from source
remote: ✖ Error: autoreconf -fiv && ./configure --disable-shared --disable-dependency-tracking --with-jpeg8 --prefix="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" --bindir="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" --libdir="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" && make -j2 && make install -j2
remote: Command failed: ./configure --disable-shared --disable-dependency-tracking --with-jpeg8 --prefix="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" --bindir="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor" --libdir="/tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/mozjpeg/vendor"
remote: configure: error: no nasm (Netwide Assembler) found
remote:
remote: at ChildProcess.exithandler (child_process.js:275:12)
remote: at emitTwo (events.js:126:13)
remote: at ChildProcess.emit (events.js:214:7)
remote: at maybeClose (internal/child_process.js:925:16)
remote: at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
remote:
remote: > optipng-bin#3.1.4 postinstall /tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/optipng-bin
remote: > node lib/install.js
remote:
remote: ✔ optipng pre-build test passed successfully
remote:
remote: > pngquant-bin#3.1.1 postinstall /tmp/build_7ea60020ff551b38876501f2f9a41fe5/node_modules/pngquant-bin
remote: > node lib/install.js
remote:
remote: ✔ pngquant pre-build test passed successfully
remote:
remote: > personalsite#1.0.0 postinstall /tmp/build_7ea60020ff551b38876501f2f9a41fe5
remote: > webpack
remote:
remote: Hash: c97c97d674d97406c5d6
remote: Version: webpack 3.10.0
remote: Time: 2871ms
remote: Asset Size Chunks Chunk Names
remote: bundle.js 1.26 MB 0 [emitted] [big] main
remote: [114] ./react-client/src/index.js 477 bytes {0} [built]
remote: [125] ./react-client/src/Components/App.js 2.77 kB {0} [built]
remote: [151] ./react-client/src/Components/HomePage.js 4.01 kB {0} [built]
remote: [152] ./react-client/src/Components/About.js 2.61 kB {0} [built]
remote: [153] ./react-client/src/Components/Bio.js 4.38 kB {0} [built]
remote: [154] ./react-client/src/images/bruges.jpg 162 bytes {0} [built] [failed] [1 error]
remote: [155] ./react-client/src/Components/Experience.js 11.5 kB {0} [built]
remote: [160] ./react-client/src/Components/Contact.js 3.1 kB {0} [built]
remote: [161] ./react-client/src/Components/Form.js 4.93 kB {0} [built]
remote: [163] ./react-client/src/Components/Landing.js 3.71 kB {0} [built]
remote: [234] ./react-client/src/Components/ScrollArrow.js 2.54 kB {0} [built]
remote: [236] ./react-client/src/Components/Footer.js 3.32 kB {0} [built]
remote: + 225 hidden modules
remote:
remote: ERROR in ./react-client/src/images/bruges.jpg
remote: Module build failed: Error: write EPIPE
remote: at _errnoException (util.js:1024:11)
remote: at WriteWrap.afterWrite [as oncomplete] (net.js:867:14)
remote: # ./react-client/src/Components/About.js 45:72-103
remote: # ./react-client/src/Components/HomePage.js
remote: # ./react-client/src/Components/App.js
remote: # ./react-client/src/index.js
remote:
remote: ERROR in ./react-client/src/Components/HomePage.js
remote: Module not found: Error: Can't resolve './Navbar.js' in '/tmp/build_7ea60020ff551b38876501f2f9a41fe5/react-client/src/Components'
remote: # ./react-client/src/Components/HomePage.js 33:14-36
remote: # ./react-client/src/Components/App.js
remote: # ./react-client/src/index.js
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 2
remote: npm ERR! personalsite#1.0.0 postinstall: `webpack`
remote: npm ERR! Exit status 2
remote: npm ERR!
remote: npm ERR! Failed at the personalsite#1.0.0 postinstall script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /app/.npm/_logs/2018-01-30T17_48_44_618Z-debug.log
remote:
remote: -----> Build failed
remote:
remote: We're sorry this build is failing! You can troubleshoot common issues here:
remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:
remote: If you're stuck, please submit a ticket so we can help:
remote: https://help.heroku.com/
remote:
remote: Love,
remote: Heroku
remote:
remote: ! Push rejected, failed to compile Node.js app.
remote:
remote: ! Push failed
remote: Verifying deploy...
remote:
remote: ! Push rejected to oliverpoplepersonalwebsite.
remote:
To https://git.heroku.com/oliverpoplepersonalwebsite.git
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/oliverpoplepersonalwebsite.git'
WHAT I'VE TRIED:
i) I tried installing the npm-shrinkwrap, to see whether locking-in the dependencies would help. It did not.
ii) I also changed Heroku's default configuration from 'NPM_CONFIG_PRODUCTION=true' to 'NPM_CONFIG_PRODUCTION=false', as I wanted devDependencies includes with the node modules installed on Heroku.
Any help would be massively appreciated.
OTHER RELEVANT FILES:
package.json
{
"name": "personalsite",
"version": "1.0.0",
"engines": {
"node": "8.9.1",
"npm": "5.6.0"
},
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack -d - watch",
"start": "node ./server/index.js",
"build": "webpack -p",
"react-dev": "webpack -d --watch",
"server-dev": "nodemon server/index.js",
"postinstall": "webpack",
"heroku-postbuild": "webpack -p"
},
"repository": {
"type": "git",
"url": "git+https://github.com/oliverpople/PersonalSite.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/oliverpople/PersonalSite/issues"
},
"homepage": "https://github.com/oliverpople/PersonalSite#readme",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"body-parser": "^1.18.2",
"dotenv": "^4.0.0",
"express": "^4.16.2",
"foobar": "^1.1.0",
"jquery": "^3.3.1",
"nodemailer": "^4.4.2",
"react": "^16.2.0",
"react-delay-render": "^0.1.2",
"react-dom": "^16.2.0",
"react-event-timeline": "^1.4.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-typewriter": "^0.4.1",
"semantic-ui-react": "^0.77.2",
"webpack": "^3.10.0"
},
"devDependencies": {
"file-loader": "^1.1.6",
"image-webpack-loader": "^4.0.0"
}
}
webpack.config.js
const path = require('path');
const SRC_DIR = path.join(__dirname, '/react-client/src');
const DIST_DIR = path.join(__dirname, '/react-client/dist');
const webpack = require('webpack');
module.exports = {
entry: `${SRC_DIR}/index.js`,
output: {
path: DIST_DIR,
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.css']
},
module : {
loaders : [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true,
},
},
],
},
{
test: /\.jsx?$/,
include: SRC_DIR,
loader: 'babel-loader',
query: {
presets: ['es2015', "stage-0", 'react']
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
};
Components/About.js
import React, { Component } from 'react';
import Bio from "./Bio.js";
class About extends Component {
render() {
return (
<div className='titleContainer' id='aboutSection'>
<div className='titleText'>
ABOUT ME
</div>
<img className='image' src={require("../images/bruges.jpg")} />
<Bio />
</div>
)
}
}
export default About;
Components/NavBar.js
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Sticky } from 'semantic-ui-react';
class NavBar extends Component {
render() {
return (
<Sticky >
<header>
<span className="navButton" id="homeButton">
<Link to="/#section1" className="navLink">
HOME
</Link>
</span>
<span className="navButton">
<Link to="/#section4" className="navLink">
CONTACT
</Link>
</span>
<span className="navButton">
<Link to="/#section3" className="navLink">
EXPERIENCE
</Link>
</span>
<span className="navButton">
<Link to="/#section2" className="navLink">
ABOUT
</Link>
</span>
</header>
</ Sticky>
)
}
}
export default NavBar;