Deploying React to Heroku - Application Error but no error on build

Question

I am trying to deploy my React app to Heroku... The app compiles and builds successfully on my local server as well as in Heroku but the application is still showing an error. I also, added https://github.com/mars/create-react-app-buildpack.git to my buildpacks in heroku.

Also, I have automatic deploys from my github account.

What am I doing wrong? I have followed multiple tutorials with the same issue but they do not seem to work.

I received this error on build; also, I didn't use create-react-app to build my react file, it was built from scratch if that makes a difference:

here is my heroku logs:

 2018-02-02T01:59:42.996186+00:00 app[api]: Deploy 4177f4a1 by user km
2018-02-02T01:59:42.996186+00:00 app[api]: Release v15 created by user km
2018-02-02T01:59:30.000000+00:00 app[api]: Build succeeded
2018-02-02T01:59:43.376904+00:00 heroku[web.1]: State changed from crashed to starting
2018-02-02T01:59:45.759417+00:00 heroku[web.1]: Starting process with command `npm start`
2018-02-02T01:59:47.448351+00:00 app[web.1]:
2018-02-02T01:59:47.448375+00:00 app[web.1]: > get_happy@1.0.0 prestart /app
2018-02-02T01:59:47.448377+00:00 app[web.1]: > babel-node tools/startMessage.js
2018-02-02T01:59:47.448379+00:00 app[web.1]:
2018-02-02T01:59:47.453960+00:00 app[web.1]: sh: 1: babel-node: not found
2018-02-02T01:59:47.458812+00:00 app[web.1]: npm ERR! file sh
2018-02-02T01:59:47.459004+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-02-02T01:59:47.459150+00:00 app[web.1]: npm ERR! errno ENOENT
2018-02-02T01:59:47.459294+00:00 app[web.1]: npm ERR! syscall spawn
2018-02-02T01:59:47.460345+00:00 app[web.1]: npm ERR! get_happy@1.0.0 prestart: `babel-node tools/startMessage.js`
2018-02-02T01:59:47.460449+00:00 app[web.1]: npm ERR! spawn ENOENT
2018-02-02T01:59:47.460621+00:00 app[web.1]: npm ERR!
2018-02-02T01:59:47.460767+00:00 app[web.1]: npm ERR! Failed at the get_happy@1.0.0 prestart script.
2018-02-02T01:59:47.460915+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-02-02T01:59:47.465102+00:00 app[web.1]:
2018-02-02T01:59:47.465281+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-02-02T01:59:47.465403+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-02-02T01_59_47_462Z-debug.log
2018-02-02T01:59:47.522890+00:00 heroku[web.1]: State changed from starting to crashed
2018-02-02T01:59:47.524985+00:00 heroku[web.1]: State changed from crashed to starting
2018-02-02T01:59:47.512556+00:00 heroku[web.1]: Process exited with status 1
2018-02-02T01:59:48.223138+00:00 heroku[web.1]: Restarting
2018-02-02T01:59:47.918820+00:00 app[api]: Deploy 4177f4a1 by user kristinenicolemartin@gmail.com
2018-02-02T01:59:47.918820+00:00 app[api]: Release v16 created by user kristinenicolemartin@gmail.com
2018-02-02T01:59:35.000000+00:00 app[api]: Build succeeded
2018-02-02T01:59:49.821030+00:00 heroku[web.1]: Starting process with command `npm start`
2018-02-02T01:59:50.411360+00:00 heroku[web.1]: Starting process with command `npm start`
2018-02-02T01:59:51.526967+00:00 heroku[web.1]: Process exited with status 1
2018-02-02T01:59:51.468148+00:00 app[web.1]:
2018-02-02T01:59:51.468180+00:00 app[web.1]: > get_happy@1.0.0 prestart /app
2018-02-02T01:59:51.468182+00:00 app[web.1]: > babel-node tools/startMessage.js
2018-02-02T01:59:51.468183+00:00 app[web.1]:
2018-02-02T01:59:51.474558+00:00 app[web.1]: sh: 1: babel-node: not found
2018-02-02T01:59:51.478509+00:00 app[web.1]: npm ERR! file sh
2018-02-02T01:59:51.478718+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-02-02T01:59:51.479015+00:00 app[web.1]: npm ERR! syscall spawn
2018-02-02T01:59:51.478870+00:00 app[web.1]: npm ERR! errno ENOENT
2018-02-02T01:59:51.480022+00:00 app[web.1]: npm ERR! get_happy@1.0.0 prestart: `babel-node tools/startMessage.js`
2018-02-02T01:59:51.480131+00:00 app[web.1]: npm ERR! spawn ENOENT
2018-02-02T01:59:51.480419+00:00 app[web.1]: npm ERR! Failed at the get_happy@1.0.0 prestart script.
2018-02-02T01:59:51.480307+00:00 app[web.1]: npm ERR!
2018-02-02T01:59:51.480524+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-02-02T01:59:51.484184+00:00 app[web.1]:
2018-02-02T01:59:51.484320+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-02-02T01:59:51.484394+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-02-02T01_59_51_481Z-debug.log
2018-02-02T01:59:51.736214+00:00 app[web.1]:
2018-02-02T01:59:51.736235+00:00 app[web.1]: > get_happy@1.0.0 prestart /app
2018-02-02T01:59:51.736236+00:00 app[web.1]: > babel-node tools/startMessage.js
2018-02-02T01:59:51.736238+00:00 app[web.1]:
2018-02-02T01:59:51.741298+00:00 app[web.1]: sh: 1: babel-node: not found
2018-02-02T01:59:51.745176+00:00 app[web.1]: npm ERR! file sh
2018-02-02T01:59:51.745365+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-02-02T01:59:51.745513+00:00 app[web.1]: npm ERR! errno ENOENT
2018-02-02T01:59:51.745655+00:00 app[web.1]: npm ERR! syscall spawn
2018-02-02T01:59:51.746647+00:00 app[web.1]: npm ERR! get_happy@1.0.0 prestart: `babel-node tools/startMessage.js`
2018-02-02T01:59:51.746747+00:00 app[web.1]: npm ERR! spawn ENOENT
2018-02-02T01:59:51.746912+00:00 app[web.1]: npm ERR!
2018-02-02T01:59:51.747048+00:00 app[web.1]: npm ERR! Failed at the get_happy@1.0.0 prestart script.
2018-02-02T01:59:51.747139+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-02-02T01:59:51.753972+00:00 app[web.1]:
2018-02-02T01:59:51.754106+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-02-02T01:59:51.754183+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-02-02T01_59_51_748Z-debug.log
2018-02-02T01:59:51.806311+00:00 heroku[web.1]: State changed from starting to crashed
2018-02-02T01:59:51.793636+00:00 heroku[web.1]: Process exited with status 1
2018-02-02T01:59:53.465155+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=roadtripadventuremap.herokuapp.com request_id=963138bc-c512-494c-ab33-536e80bd852e fwd="169.234.121.183" dyno= connect= service= status=503 bytes= protocol=https
2018-02-02T01:59:54.762050+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=roadtripadventuremap.herokuapp.com request_id=65a22a16-7957-4b58-9e09-f643cf1d66bf fwd="169.234.121.183" dyno= connect= service= status=503 bytes= protocol=https
2018-02-02T02:00:00.979814+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=roadtripadventuremap.herokuapp.com request_id=bf3d2c9c-cfc8-412e-a70b-90c567c31c47 fwd="169.234.121.183" dyno= connect= service= status=503 bytes= protocol=https
2018-02-02T02:00:01.499596+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=roadtripadventuremap.herokuapp.com request_id=a6474fcc-e0d3-4759-aa5c-9eb66b2ea99f fwd="169.234.121.183" dyno= connect= service= status=503 bytes= protocol=https
2018-02-02T02:04:47.266697+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=roadtripadventuremap.herokuapp.com request_id=ba293b4e-d453-4efb-af0c-083988b21341 fwd="169.234.121.183" dyno= connect= service= status=503 bytes= protocol=https
2018-02-02T02:04:48.908422+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=roadtripadventuremap.herokuapp.com request_id=9e802bae-6a14-489b-a320-eb3f2b466044 fwd="169.234.121.183" dyno= connect= service= status=503 bytes= protocol=https
2018-02-02T02:05:16.000000+00:00 app[api]: Build started by user kristinenicolemartin@gmail.com
2018-02-02T02:05:29.978451+00:00 app[api]: Release v17 created by user kristinenicolemartin@gmail.com
2018-02-02T02:05:29.978451+00:00 app[api]: Deploy 4177f4a1 by user kristinenicolemartin@gmail.com
2018-02-02T02:05:16.000000+00:00 app[api]: Build succeeded
2018-02-02T02:05:30.530834+00:00 heroku[web.1]: State changed from crashed to starting
2018-02-02T02:05:33.002249+00:00 heroku[web.1]: Starting process with command `npm start`
2018-02-02T02:05:34.774529+00:00 heroku[web.1]: Process exited with status 1
2018-02-02T02:05:34.700006+00:00 app[web.1]:
2018-02-02T02:05:34.700025+00:00 app[web.1]: > get_happy@1.0.0 prestart /app
2018-02-02T02:05:34.705878+00:00 app[web.1]: sh: 1: babel-node: not found
2018-02-02T02:05:34.700028+00:00 app[web.1]:
2018-02-02T02:05:34.700027+00:00 app[web.1]: > babel-node tools/startMessage.js
2018-02-02T02:05:34.710132+00:00 app[web.1]: npm ERR! file sh
2018-02-02T02:05:34.710316+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-02-02T02:05:34.710461+00:00 app[web.1]: npm ERR! errno ENOENT
2018-02-02T02:05:34.710596+00:00 app[web.1]: npm ERR! syscall spawn
2018-02-02T02:05:34.711653+00:00 app[web.1]: npm ERR! get_happy@1.0.0 prestart: `babel-node tools/startMessage.js`
2018-02-02T02:05:34.711755+00:00 app[web.1]: npm ERR! spawn ENOENT
2018-02-02T02:05:34.712019+00:00 app[web.1]: npm ERR! Failed at the get_happy@1.0.0 prestart script.
2018-02-02T02:05:34.711916+00:00 app[web.1]: npm ERR!
2018-02-02T02:05:34.717594+00:00 app[web.1]:
2018-02-02T02:05:34.712115+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2018-02-02T02:05:34.717719+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2018-02-02T02:05:34.717779+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2018-02-02T02_05_34_713Z-debug.log
2018-02-02T02:05:34.786663+00:00 heroku[web.1]: State changed from starting to crashed
2018-02-02T02:06:16.229103+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=roadtripadventuremap.herokuapp.com request_id=6217683a-b0a1-46d6-b718-f569f8ea2932 fwd="169.234.121.183" dyno= connect= service= status=503 bytes= protocol=https
2018-02-02T02:06:17.893550+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=roadtripadventuremap.herokuapp.com request_id=015e4a3e-111e-4bfe-bd01-19d2140a7957 fwd="169.234.121.183" dyno= connect= service= status=503 bytes= protocol=https

Below is a breakdown of my files:

static.json file:

{
  "root": "dist/",
  "routes": {
    "/**": "index.html"
  }
}

package.json:

{
    "name": "get_happy",
    "version": "1.0.0",
    "description": "React sign up flow for Happy Money",
    "scripts": {
        "prestart": "babel-node tools/startMessage.js",
        "start": "npm-run-all --parallel open:src lint:watch test:watch",
        "open:src": "babel-node tools/srcServer.js",
        "lint": "node_modules/.bin/esw webpack.config.* src tools",
        "lint:watch": "npm run lint -- --watch",
        "test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
        "test:watch": "npm run test -- --watch",
        "clean-dist": "npm run remove-dist && mkdir dist",
        "remove-dist": "node_modules/.bin/rimraf ./dist",
        "build:html": "babel-node tools/buildHtml.js",
        "prebuild": "npm-run-all clean-dist test lint build:html",
        "build": "babel-node tools/build.js",
        "postbuild": "babel-node tools/distServer.js"
    },
    "author": "Kristine Martin",
    "license": "MIT",
    "dependencies": {
        "babel-polyfill": "6.8.0",
        "bootstrap": "3.3.6",
        "jquery": "2.2.3",
        "react": "15.0.2",
        "react-addons-css-transition-group": "^15.6.2",
        "react-dom": "15.0.2",
        "react-redux": "4.4.5",
        "react-router": "2.4.0",
        "react-router-redux": "4.0.4",
        "react-transition-group": "^1.2.1",
        "redux": "3.5.2",
        "redux-thunk": "2.0.1",
        "toastr": "2.1.2"
    },
    "devDependencies": {
        "babel-cli": "6.8.0",
        "babel-core": "6.8.0",
        "babel-loader": "6.2.4",
        "babel-plugin-react-display-name": "2.0.0",
        "babel-preset-es2015": "6.6.0",
        "babel-preset-react": "6.5.0",
        "babel-preset-react-hmre": "1.1.1",
        "babel-register": "6.8.0",
        "cheerio": "0.22.0",
        "colors": "1.1.2",
        "compression": "1.6.1",
        "cross-env": "1.0.7",
        "css-loader": "0.23.1",
        "enzyme": "2.2.0",
        "eslint": "2.9.0",
        "eslint-plugin-import": "1.6.1",
        "eslint-plugin-react": "5.0.1",
        "eslint-watch": "2.1.11",
        "eventsource-polyfill": "0.9.6",
        "expect": "1.19.0",
        "express": "4.13.4",
        "extract-text-webpack-plugin": "1.0.1",
        "file-loader": "0.8.5",
        "jsdom": "8.5.0",
        "mocha": "2.4.5",
        "nock": "8.0.0",
        "npm-run-all": "1.8.0",
        "open": "0.0.5",
        "react-addons-test-utils": "15.0.2",
        "redux-immutable-state-invariant": "1.2.3",
        "redux-mock-store": "1.0.2",
        "rimraf": "2.5.2",
        "style-loader": "0.13.1",
        "url-loader": "0.5.7",
        "webpack": "1.13.0",
        "webpack-dev-middleware": "1.6.1",
        "webpack-hot-middleware": "2.10.0"
    },
    "repository": {
        "type": "git",
        "url": "h####"
    }
}

my webpack.config.prod.js

import webpack from 'webpack';
import path from 'path';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

const GLOBALS = {
    'process.env.NODE_ENV': JSON.stringify('production')
};

export default {
    debug: true,
    devtool: 'source-map',
    noInfo: false,
    entry: './src/index',
    target: 'web',
    output: {
        path: __dirname + '/dist', //Note: Physical files are only output by the production build task `npm run build`.
        publicPath: '/',
        filename: 'bundle.js'
    },
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.DefinePlugin(GLOBALS),
        new ExtractTextPlugin('styles.css'),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin()
    ],
    module: {
        loaders: [
            {test: /\.js$/, include: path.join(__dirname, 'src'), loaders: ['babel']},
            {test: /(\.css)$/, loader: ExtractTextPlugin.extract("css?sourceMap")},
            {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
            {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
        ]
    }
};  

Here is the build log:

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.9.4...
       Using default npm version: 5.6.0
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json + package-lock)
       up to date in 2.689s
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 25.4M
-----> Launching...
       Released v13
       https://roadtripadventuremap.herokuapp.com/ deployed to Heroku

Answer 1

First of all, you are running babel-node in your "npm prestart" (which is probably not what you really should be doing), but it looks like you have babel-cli (which is the package to install to obtain babel-node) in your devDependencies which Heroku does not install by default.

See this answer to understand how to fix your build. Basically, you need to change your package.json so that everything related to building your app (such as the various "build" steps in your package.json scripts, as well as any invocations of babel-node) is performed at Heroku slug compilation time. See also precompiling with babel-node for an explanation of how to move any babel-node usage to a precompile step in a production environment (such as Heroku).

You also need to make sure that Heroku installs whatever build dependencies you need, which means either moving babel et al from devDependencies to dependencies, or setting config var NPM_CONFIG_PRODUCTION to false.