Issue in Hosting React App on Heroku

Question

I am trying to host the react app in heroku...

I have created the app using create-react-app..And follow the following methods in hosting...

        git init
        heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git
        git add .
        git commit -m "Start with create-react-app"
        git push heroku master
        heroku open

But when I am trying to push the app to heroku it returns the following error...

      remote:   - htmlparser.js:235 new HTMLParser
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[html-minifier]/src/htmlparser.js:2    35:13
      remote:   
      remote:   - htmlminifier.js:946 minify
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[html-minifier]/src/htmlminifier.js    :946:3
      remote:   
      remote:   - htmlminifier.js:1299 exports.minify
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[html-minifier]/src/htmlminifier.js    :1299:10
      remote:   
      remote:   - index.js:296 
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[html-webpack-plugin]/index.js:296:    16
      remote:   
      remote:   - util.js:16 tryCatcher
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/util.js:16:23  
      remote:   - promise.js:512 Promise._settlePromiseFromHandler
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/promise.js:51    2:31
      remote:   
      remote:   - promise.js:569 Promise._settlePromise
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/promise.js:56    9:18
      remote:   
      remote:   - promise.js:614 Promise._settlePromise0
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/promise.js:61    4:10
      remote:   
      remote:   - promise.js:693 Promise._settlePromises
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/promise.js:69    3:18
      remote:   
      remote:   - async.js:133 Async._drainQueue
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/async.js:133:    16
      remote:   
      remote:   - async.js:143 Async._drainQueues
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/async.js:143:    10
      remote:   
      remote:   - async.js:17 Immediate.Async.drainQueues
      remote:     [build_4acd980d8a80e0486da141a82d0b3cee]/[bluebird]/js/release/async.js:17:1    4

How can I resolve this issue?

Answer 1

I just cloned your repo and tried npm install + npm run build. I found that npm run build fails locally. So, this is an error with the code, not with Heroku deployment.

The failure is from HTMLParser, so I looked at the public/index.html and found a heavily customized template.

To check if that public/index.html content was the problem, I replaced it with the default create-react-app HTML template code. Then, npm run build completed successfully.

So, it seems there is a problem with the validity of the HTML in your public/index.html which breaks create-react-app's template engine. I suggest running it through an HTML validator to find problems, or manually breaking the template into smaller testable pieces until you find the part that causes the build error.