Heroku push failed React

Question

I am trying to deploy my create-react-app to heroku, I deployed my backends Nodejs express normally but now that I am done with my frontend React I try to push code and I get error. I tried to push over terminal following this code:

heroku create $APP_NAME --buildpack mars/create-react-app
git push heroku master
heroku open

And I tried to connect my github with heroku and I get same error. I use react-router-dom in my app, react icons and react hooks.

This is the error:

-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false
       
-----> Installing binaries
       engines.node (package.json):  14.12.0
       engines.npm (package.json):   6.14.8
       
       Resolving node version 14.12.0...
       Downloading and installing node 14.12.0...
       npm 6.14.8 already installed with node
       
-----> Installing dependencies
       Installing node modules
       
       > core-js@2.6.11 postinstall /tmp/build_f6ddf4ec_/node_modules/babel-runtime/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > fsevents@1.2.13 install /tmp/build_f6ddf4ec_/node_modules/webpack-dev-server/node_modules/fsevents
       > node install.js
       
       
       Skipping 'fsevents' build as platform linux is not supported
       
       > fsevents@1.2.13 install /tmp/build_f6ddf4ec_/node_modules/watchpack-chokidar2/node_modules/fsevents
       > node install.js
       
       
       Skipping 'fsevents' build as platform linux is not supported
       
       > core-js@3.6.5 postinstall /tmp/build_f6ddf4ec_/node_modules/core-js
       > node -e "try{require('./postinstall')}catch(e){}"
       
       
       > fsevents@1.2.13 install /tmp/build_f6ddf4ec_/node_modules/jest-haste-map/node_modules/fsevents
       > node install.js
       
       
       Skipping 'fsevents' build as platform linux is not supported
       
       > core-js-pure@3.6.5 postinstall /tmp/build_f6ddf4ec_/node_modules/core-js-pure
       > node -e "try{require('./postinstall')}catch(e){}"
       
       added 1650 packages in 26.048s
       
-----> Build
       Running build
       
       > food-shop@0.1.0 build /tmp/build_f6ddf4ec_
       > react-scripts build
       
       Creating an optimized production build...
       Failed to compile.
       
       Error: Parse Error: <3 FOOD</title>
           <link href="/static/css/main.bbb791ae.chunk.css" rel="stylesheet"></head>
           <body>
             <noscript>You need to enable JavaScript to run this app.</noscript>
             <div id="root"></div>
             <!--
               This HTML file is a template.
               If you open it directly in the browser, you will see an empty page.
               You can add webfonts, meta tags, or analytics to this file.
               The build step will place the bundled scripts into the <body> tag.
               To begin the development, run `npm start` or `yarn start`.
               To create a production bundle, use `npm run build` or `yarn build`.
             -->
           <script>!function(e){function r(r){for(var n,f,l=r[0],p=r[1],i=r[2],c=0,s=[]  ;c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push  (o[f][0]),o[f]=0;for(n in p)Object.prototype.hasOwnProperty.call(p,n)&&(e[n]=p  [n]);for(a&&a(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}functi  on t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){v  ar p=t[l];0!==o[p]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={  },o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,  exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f  .c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,ge  t:t})},f.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object  .defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e  ,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(  4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);i  f(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"stri  ng"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));re  turn t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:fun  ction(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.proto  type.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpfood-shop"]=thi  s["webpackJsonpfood-shop"]||[],p=l.push.bind(l);l.push=r,l=l.slice();for(var i  =0;i<l.length;i++)r(l[i]);var a=p;t()}([]);
         //# sourceMappingURL=runtime-main.2f982ca8.js.map</script><script src="/static  /js/2.38077f76.chunk.js"></script><script src="/static/js/main.d7c3f28e.chunk.  js"></script></body>
         </html>
         
         - htmlparser.js:244 new HTMLParser
           [build_f6ddf4ec_]/[html-minifier-terser]/src/htmlparser.js:244:13
         
         - htmlminifier.js:993 minify
           [build_f6ddf4ec_]/[html-minifier-terser]/src/htmlminifier.js:993:3
         
         - htmlminifier.js:1354 Object.exports.minify
           [build_f6ddf4ec_]/[html-minifier-terser]/src/htmlminifier.js:1354:16
         
         - index.js:445 HtmlWebpackPlugin.postProcessHtml
           [build_f6ddf4ec_]/[html-webpack-plugin]/index.js:445:41
         
         - index.js:274 
           [build_f6ddf4ec_]/[html-webpack-plugin]/index.js:274:25
         
         - task_queues.js:93 processTicksAndRejections
           internal/process/task_queues.js:93:5
       
       
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! food-shop@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the food-shop@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.eMeWR/_logs/2020-10-07T16_43_19_867Z-debug.log
-----> Build failed
       
       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys
       
       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/
       
       Love,
       Heroku
       
 !     Push rejected, failed to compile React.js (create-react-app) multi app.
 !     Push failed

Any idea what is wrong here?

Please show more of the output, especially the part before the one you just posted. The reason why the project failed to compile is probably there. — cbr, Oct 07 '20 at 16:34

cbr · Accepted Answer · 2020-10-07T17:07:47.193

1

Read through the log. Especially the part below "Running build". It says: Error: Parse Error: <3 FOOD</title>. This means that you have a syntax error in your HTML, in your <title> tag. Since you're using CRA, it's most likely the public/index.html file.

The error suggests that you have <3 in your title. In HTML, you have to escape the < and > characters in text, as those reserved for HTML tags.

In your <title>, replace <3 with <3. The < is the HTML entity for the < character (less than).

See also: Which characters need to be escaped in HTML?

edited Oct 07 '20 at 17:07

answered Oct 07 '20 at 16:51

cbr

12,563
3
38
63

Thank you very much! :) – Matej Oct 07 '20 at 17:06

score 0 · Answer 2 · answered Nov 29 '20 at 03:14

I had a similar problem resulting from ENV in the index.html try to remove it or replace with the address to see if it helps also, check your static.json file

to be

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

or if any backend proxy

{
"root":"build/",
"routes":{
    "/**":"index.html"
},
"proxies":{ 
    "/api/":{"origin":"${API_URL}"}
}

}

score 0 · Answer 3 · answered Dec 06 '20 at 14:17

The best practice to push React apps to Heroku with a node js backend is to use the Heroku Post Build Script, This post build will take care of all the work under the hood and all you need to do is just

git push heroku

Follow the steps below

Add This below snippet to your package.json under the scripts

    scripts{
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix reactFolderName && npm run build --prefix reactFolderName"
}

And add this snippet to your index.js file

    app = express()
    app.use(express.static('reactFolderName/build'));
    app.get('*', (req, res) => res.sendFile(path.resolve(__dirname, 'reactFolderName', 'build', 'index.html')));

Heroku push failed React

3 Answers3