React-BoilerPlate deploy to heroku successful but Application Error - heroku

Question

i clone React-BoilerPlate and edit for test create web
and i try deploy to heroku
it's successful in log but when i open browser it show "Application Error"
(in my mac dont have problem it working)
logs in dashboard.heroku.com
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): >=5
engines.npm (package.json): >=3
Resolving node version >=5...
Downloading and installing node 10.4.1...
Bootstrapping npm >=3 (replacing 6.1.0)...
npm 6.1.0 installed
-----> Restoring cache
Loading 2 from cacheDirectories (default):
- node_modules
- bower_components (not cached - skipping)
-----> Building dependencies
Installing node modules (package.json + package-lock)
> myapp#1.0.0 preinstall /tmp/build_4cc58fca63d336e918330c92a7320a18
> npm run npmcheckversion
> myapp#1.0.0 npmcheckversion /tmp/build_4cc58fca63d336e918330c92a7320a18
> node ./internals/scripts/npmcheckversion.js
> myapp#1.0.0 postinstall /tmp/build_4cc58fca63d336e918330c92a7320a18
> npm run build:dll
> myapp#1.0.0 build:dll /tmp/build_4cc58fca63d336e918330c92a7320a18
> node ./internals/scripts/dependencies.js
audited 25883 packages in 17.902s
found 46 vulnerabilities (8 low, 38 moderate)
run `npm audit fix` to fix them, or `npm audit` for details
Running heroku-postbuild
> myapp#1.0.0 heroku-postbuild /tmp/build_4cc58fca63d336e918330c92a7320a18
> npm install && npm run build
> myapp#1.0.0 preinstall /tmp/build_4cc58fca63d336e918330c92a7320a18
> npm run npmcheckversion
> myapp#1.0.0 npmcheckversion /tmp/build_4cc58fca63d336e918330c92a7320a18
> node ./internals/scripts/npmcheckversion.js
> myapp#1.0.0 postinstall /tmp/build_4cc58fca63d336e918330c92a7320a18
> npm run build:dll
> myapp#1.0.0 build:dll /tmp/build_4cc58fca63d336e918330c92a7320a18
> node ./internals/scripts/dependencies.js
audited 25883 packages in 16.989s
found 46 vulnerabilities (8 low, 38 moderate)
run `npm audit fix` to fix them, or `npm audit` for details
> myapp#1.0.0 prebuild /tmp/build_4cc58fca63d336e918330c92a7320a18
> npm run build:clean
> myapp#1.0.0 build:clean /tmp/build_4cc58fca63d336e918330c92a7320a18
> rimraf ./build
> myapp#1.0.0 build /tmp/build_4cc58fca63d336e918330c92a7320a18
> cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress --hide-modules --display-optimization-bailout
Hash: d1b0ba3fc6910d2a897a
Version: webpack 3.5.5
Time: 45827ms
Asset Size Chunks Chunk Names
68b0c4fcb84d239f261c1a5e65818142.gif 4.13 kB [emitted]
bc47c23f4a28a80f48dbafb4ae48d853.svg 602 bytes [emitted]
b812ddd6e7e7c9bd9fc5ba89d1a87ecd.svg 693 bytes [emitted]
68d2042ac5fdae4387e8f3b98e80d755.png 19.3 kB [emitted]
0ae4b3198c60ae8e849a17c2b9e36362.png 1.99 kB [emitted]
0c41c45073224f7bf4dfdbf7b703c05c.png 2.34 kB [emitted]
ec6994795fdd10b1a14a82dd076e7c31.otf 40.1 kB [emitted]
ce0b1f00d0b40ef65010ac4ec7e4f6a3.otf 39.8 kB [emitted]
.htaccess.bin 1.79 kB [emitted]
favicon.ico 370 kB [emitted]
icon-120x120.png 11.2 kB [emitted]
icon-128x128.png 11.2 kB [emitted]
icon-144x144.png 12.7 kB [emitted]
icon-152x152.png 13.9 kB [emitted]
icon-167x167.png 16.5 kB [emitted]
icon-180x180.png 14.4 kB [emitted]
icon-192x192.png 17.9 kB [emitted]
icon-384x384.png 42 kB [emitted]
icon-512x512.png 16.7 kB [emitted]
icon-72x72.png 5.89 kB [emitted]
icon-96x96.png 8.11 kB [emitted]
manifest.json 975 bytes [emitted]
9a4cbc132ce42296701bb3cc91fc8bd3.svg 930 bytes [emitted]
ced611daf7709cc778da928fec876475.eot 2.05 kB [emitted]
f97e3bbf73254b0112091d0192f17aec.svg 2.15 kB [emitted]
d41f55a78e6f49a5512878df1737e58a.ttf 1.89 kB [emitted]
b7c9e1e479de3b53f1e4e30ebac2403a.woff 1.38 kB [emitted]
0.0f8f8d839c3c67ea9a03.chunk.js 343 kB 0 [emitted] [big]
1.d9aef47ea860a023a399.chunk.js 331 kB 1 [emitted] [big]
2.02140dd8fb729e8ec62d.chunk.js 338 kB 2 [emitted] [big]
3.59f24490e8d9db438d4a.chunk.js 162 kB 3 [emitted]
4.dedc780d9ee602a24732.chunk.js 81.5 kB 4 [emitted]
5.14ce9b3d76aef2ba3592.chunk.js 40.6 kB 5 [emitted]
6.0c6db533aceba6385e37.chunk.js 45.3 kB 6 [emitted]
7.98b59f40657a56912eaf.chunk.js 46 kB 7 [emitted]
8.3a4ea6143fc6f0ca179e.chunk.js 26.1 kB 8 [emitted]
9.13d365030651a79eb21d.chunk.js 17.5 kB 9 [emitted]
10.1e3ab2bf211e3c6c6232.chunk.js 41.1 kB 10 [emitted]
11.260090743f2cac2a0f93.chunk.js 24.1 kB 11 [emitted]
12.7bcdf07c7edc3ce0a11d.chunk.js 24.4 kB 12 [emitted]
13.c4e98897ef480410016d.chunk.js 716 bytes 13 [emitted]
main.898cbfbcec44f3cfa4c2.js 1.25 MB 14 [emitted] main
index.html 1.06 kB [emitted]
sw.js 20.6 kB [emitted]
WARNING in ./node_modules/moment/src/lib/locale/locales.js
Module not found: Error: Can't resolve './locale' in '/tmp/build_4cc58fca63d336e918330c92a7320a18/node_modules/moment/src/lib/locale'
# ./node_modules/moment/src/lib/locale/locales.js 56:12-46
# ./node_modules/moment/src/lib/locale/locale.js
# ./node_modules/moment/src/moment.js
# ./app/components/home/cover/calendar/index.js
# ./app/components/home/cover/index.js
# ./app/components/home/index.js
# ./app/containers/HomePage/index.js
# ./app/containers/HomePage/Loadable.js
# ./app/containers/App/index.js
# ./app/app.js
# multi ./app/app.js
Child html-webpack-plugin for "index.html":
1 asset
Child __offline_serviceworker:
1 asset
-----> Caching build
Clearing previous node cache
Saving 2 cacheDirectories (default):
- node_modules
- bower_components (nothing to cache)
-----> Pruning devDependencies
> pre-commit#1.2.2 uninstall node_modules/pre-commit
> node uninstall.js
removed 1620 packages and audited 1114 packages in 19.282s
found 0 vulnerabilities
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 38.8M
-----> Launching...
Released v12
https://myapp-pr-4.herokuapp.com/ deployed to Heroku
logs by code heroku logs --tail --app myapp
2018-06-19T08:33:45.641928+00:00 heroku[web.1]: Idling
2018-06-19T08:33:45.641928+00:00 heroku[web.1]: State changed from up to down
2018-06-19T08:33:46.752542+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2018-06-19T08:33:46.917240+00:00 heroku[web.1]: Process exited with status 143
(i have logs 2018-06-19T08:01:33.875099+00:00 app[web.1] but just '___' is defined but never used)
and in browser myapp show like that
(photo in link)
enter image description here
thank you for your help
if u need more detail , tell me i will show u

Answer 1

I had the same problem and following react-boilerplate instructions made it work for me. Here is the link: https://github.com/react-boilerplate/react-boilerplate/blob/master/docs/general/deployment.md
What it says:
Heroku
Easy 5-Step Deployment Process
Step 1: Create a Procfile with the following line: web: npm run start:prod. We do this because Heroku runs npm run start by default, so we need this setting to override the default run command.
Step 2: Install the Node.js buildpack for your Heroku app by running the following command: heroku buildpacks:set https://github.com/heroku/heroku-buildpack-nodejs#v91 -a [your app name]. Make sure to replace #v91 with whatever the latest buildpack is, which you can find here. https://github.com/heroku/heroku-buildpack-nodejs/releases.
Step 3: Add this line to your package.json file in the scripts area: "heroku-postbuild": "npm run build",. This is so Heroku can build your production assets when deploying (more of which you can read about here). Then, adjust the prebuild script in your package.json file so it looks like this: "prebuild": "npm run build:clean", to avoid having Heroku attempt to run Jest tests (which are unsupported with this buildpack).
Step 4: Run heroku config:set NPM_CONFIG_PRODUCTION=false so that Heroku can compile the NPM modules included in your devDependencies (since many of these packages are required for the build process).
Step 5: Follow the standard Heroku deploy process:
git add .
git commit -m 'Made some epic changes as per usual'
git push heroku master