CODEWITHSUNDEEP
reactjsheroku
Leeuw
Leeuw

Reputation: 53

Why failed to deploy a react app on Heroku

I was trying to deploy a react app to Heroku, but the build was failed. I searched for the problem for many hours but I found noting.

note: I used yarn version 3.2.1.

here is the build log from heroku:

-----> Building on the Heroku-20 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       USE_YARN_CACHE=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       
-----> Installing binaries
        !     You don't need to specify Yarn engine. Heroku will install the latest Yarn 1.x, so that per project version can be used. More information here: https://yarnpkg.com/getting-started/install#global-install
              https://devcenter.heroku.com/articles/nodejs-support
       
       engines.node (package.json):  16.14.2
       engines.npm (package.json):   unspecified (use default)
       engines.yarn (package.json):  unspecified (use default)
       
       Resolving node version 16.14.2...
       Downloading and installing node 16.14.2...
       Using default npm version: 8.5.0
       Resolving yarn version 1.22.x...
       Downloading and installing yarn (1.22.19)
       Using yarn 3.2.1
       
-----> Installing dependencies
       Running 'yarn install' with yarn.lock
       ➤ YN0000: ┌ Resolution step
       ➤ YN0002: │ Admin@workspace:. doesn't provide @testing-library/dom (pb2897), requested by @testing-library/user-event
       ➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [ac80a] doesn't provide @babel/plugin-syntax-flow (pbadc4), requested by eslint-plugin-flowtype
       ➤ YN0002: │ eslint-config-react-app@npm:7.0.1 [ac80a] doesn't provide @babel/plugin-transform-react-jsx (p4f6e8), requested by eslint-plugin-flowtype
       ➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide typescript (p59348), requested by fork-ts-checker-webpack-plugin
       ➤ YN0002: │ react-dev-utils@npm:12.0.1 doesn't provide webpack (p1012e), requested by fork-ts-checker-webpack-plugin
       ➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
       ➤ YN0000: └ Completed in 0s 307ms
       
       ➤ YN0000: ┌ Post-resolution validation
       ➤ YN0000: │ @@ -3928,8 +3928,53 @@
       ➤ YN0000: │    checksum: 8ed0d477ce3bc9c6fe2bf6a6a2cc316bb9c4127c5a7827bae947fa8ec34c7092395c5a283cc300c05b5fa01cbbfa1f938f410a7bf75db7c7846fea41949989ec
       ➤ YN0000: │    languageName: node
       ➤ YN0000: │    linkType: hard
       ➤ YN0000: │  
       ➤ YN0028: │ +"Admin@workspace:.":
       ➤ YN0028: │ +  version: 0.0.0-use.local
       ➤ YN0028: │ +  resolution: "Admin@workspace:."
       ➤ YN0028: │ +  dependencies:
       ➤ YN0028: │ +    "@syncfusion/ej2": ^19.4.48
       ➤ YN0028: │ +    "@syncfusion/ej2-buttons": ^20.2.36
       ➤ YN0028: │ +    "@syncfusion/ej2-file-utils": ^20.2.36
       ➤ YN0028: │ +    "@syncfusion/ej2-react-calendars": ^19.4.48
       ➤ YN0028: │ +    "@syncfusion/ej2-react-charts": ^19.4.50
       ➤ YN0028: │ +    "@syncfusion/ej2-react-dropdowns": ^19.4.52
       ➤ YN0028: │ +    "@syncfusion/ej2-react-grids": ^19.4.50
       ➤ YN0028: │ +    "@syncfusion/ej2-react-inputs": ^19.4.52
       ➤ YN0028: │ +    "@syncfusion/ej2-react-kanban": ^19.4.48
       ➤ YN0028: │ +    "@syncfusion/ej2-react-popups": ^19.4.52
       ➤ YN0028: │ +    "@syncfusion/ej2-react-richtexteditor": ^19.4.50
       ➤ YN0028: │ +    "@syncfusion/ej2-react-schedule": ^19.4.50
       ➤ YN0028: │ +    "@syncfusion/ej2-splitbuttons": ^20.2.36
       ➤ YN0028: │ +    "@testing-library/jest-dom": ^5.16.4
       ➤ YN0028: │ +    "@testing-library/react": ^13.3.0
       ➤ YN0028: │ +    "@testing-library/user-event": ^13.5.0
       ➤ YN0028: │ +    autoprefixer: ^10.4.7
       ➤ YN0028: │ +    eslint: ^8.9.0
       ➤ YN0028: │ +    eslint-config-airbnb: ^19.0.4
       ➤ YN0028: │ +    eslint-plugin-import: ^2.25.4
       ➤ YN0028: │ +    eslint-plugin-jsx-a11y: ^6.5.1
       ➤ YN0028: │ +    eslint-plugin-react: ^7.28.0
       ➤ YN0028: │ +    eslint-plugin-react-hooks: ^4.3.0
       ➤ YN0028: │ +    formik: ^2.2.9
       ➤ YN0028: │ +    postcss: ^8.4.14
       ➤ YN0028: │ +    primeflex: ^3.2.1
       ➤ YN0028: │ +    primeicons: ^5.0.0
       ➤ YN0028: │ +    primereact: ^8.1.1
       ➤ YN0028: │ +    react: ^18.2.0
       ➤ YN0028: │ +    react-dom: ^18.2.0
       ➤ YN0028: │ +    react-helmet: ^6.1.0
       ➤ YN0028: │ +    react-icons: ^4.4.0
       ➤ YN0028: │ +    react-router: ^6.3.0
       ➤ YN0028: │ +    react-router-dom: ^6.3.0
       ➤ YN0028: │ +    react-scripts: 5.0.0
       ➤ YN0028: │ +    tailwindcss: ^3.1.5
       ➤ YN0028: │ +    web-vitals: ^2.1.4
       ➤ YN0028: │ +    yup: ^0.32.11
       ➤ YN0028: │ +  languageName: unknown
       ➤ YN0028: │ +  linkType: soft
       ➤ YN0028: │ +
       ➤ YN0000: │  "abab@npm:^2.0.3, abab@npm:^2.0.5":
       ➤ YN0000: │    version: 2.0.6
       ➤ YN0000: │    resolution: "abab@npm:2.0.6"
       ➤ YN0000: │    checksum: 6ffc1af4ff315066c62600123990d87551ceb0aafa01e6539da77b0f5987ac7019466780bf480f1787576d4385e3690c81ccc37cfda12819bf510b8ab47e5a3e
       ➤ YN0000: │ @@ -10927,53 +10972,8 @@
       ➤ YN0000: │    checksum: 1d38588e520dab7cea67cbbe2efdd86a10cc7a074c09657635e34f035277b59fbb57d09d8638346bf7090f8e8ebc070c96fa5fd183b777fff4f5edff5e9466cf
       ➤ YN0000: │    languageName: node
       ➤ YN0000: │    linkType: hard
       ➤ YN0000: │  
       ➤ YN0028: │ -"Admin@workspace:.":
       ➤ YN0028: │ -  version: 0.0.0-use.local
       ➤ YN0028: │ -  resolution: "Admin@workspace:."
       ➤ YN0028: │ -  dependencies:
       ➤ YN0028: │ -    "@syncfusion/ej2": ^19.4.48
       ➤ YN0028: │ -    "@syncfusion/ej2-buttons": ^20.2.36
       ➤ YN0028: │ -    "@syncfusion/ej2-file-utils": ^20.2.36
       ➤ YN0028: │ -    "@syncfusion/ej2-react-calendars": ^19.4.48
       ➤ YN0028: │ -    "@syncfusion/ej2-react-charts": ^19.4.50
       ➤ YN0028: │ -    "@syncfusion/ej2-react-dropdowns": ^19.4.52
       ➤ YN0028: │ -    "@syncfusion/ej2-react-grids": ^19.4.50
       ➤ YN0028: │ -    "@syncfusion/ej2-react-inputs": ^19.4.52
       ➤ YN0028: │ -    "@syncfusion/ej2-react-kanban": ^19.4.48
       ➤ YN0028: │ -    "@syncfusion/ej2-react-popups": ^19.4.52
       ➤ YN0028: │ -    "@syncfusion/ej2-react-richtexteditor": ^19.4.50
       ➤ YN0028: │ -    "@syncfusion/ej2-react-schedule": ^19.4.50
       ➤ YN0028: │ -    "@syncfusion/ej2-splitbuttons": ^20.2.36
       ➤ YN0028: │ -    "@testing-library/jest-dom": ^5.16.4
       ➤ YN0028: │ -    "@testing-library/react": ^13.3.0
       ➤ YN0028: │ -    "@testing-library/user-event": ^13.5.0
       ➤ YN0028: │ -    autoprefixer: ^10.4.7
       ➤ YN0028: │ -    eslint: ^8.9.0
       ➤ YN0028: │ -    eslint-config-airbnb: ^19.0.4
       ➤ YN0028: │ -    eslint-plugin-import: ^2.25.4
       ➤ YN0028: │ -    eslint-plugin-jsx-a11y: ^6.5.1
       ➤ YN0028: │ -    eslint-plugin-react: ^7.28.0
       ➤ YN0028: │ -    eslint-plugin-react-hooks: ^4.3.0
       ➤ YN0028: │ -    formik: ^2.2.9
       ➤ YN0028: │ -    postcss: ^8.4.14
       ➤ YN0028: │ -    primeflex: ^3.2.1
       ➤ YN0028: │ -    primeicons: ^5.0.0
       ➤ YN0028: │ -    primereact: ^8.1.1
       ➤ YN0028: │ -    react: ^18.2.0
       ➤ YN0028: │ -    react-dom: ^18.2.0
       ➤ YN0028: │ -    react-helmet: ^6.1.0
       ➤ YN0028: │ -    react-icons: ^4.4.0
       ➤ YN0028: │ -    react-router: ^6.3.0
       ➤ YN0028: │ -    react-router-dom: ^6.3.0
       ➤ YN0028: │ -    react-scripts: 5.0.0
       ➤ YN0028: │ -    tailwindcss: ^3.1.5
       ➤ YN0028: │ -    web-vitals: ^2.1.4
       ➤ YN0028: │ -    yup: ^0.32.11
       ➤ YN0028: │ -  languageName: unknown
       ➤ YN0028: │ -  linkType: soft
       ➤ YN0028: │ -
       ➤ YN0000: │  "promise-inflight@npm:^1.0.1":
       ➤ YN0000: │    version: 1.0.1
       ➤ YN0000: │    resolution: "promise-inflight@npm:1.0.1"
       ➤ YN0000: │    checksum: 22749483091d2c594261517f4f80e05226d4d5ecc1fc917e1886929da56e22b5718b7f2a75f3807e7a7d471bc3be2907fe92e6e8f373ddf5c64bae35b5af3981
       ➤ YN0000: │ 
       ➤ YN0028: │ The lockfile would have been modified by this install, which is explicitly forbidden.
       ➤ YN0000: └ Completed
       ➤ YN0000: Failed with errors in 0s 499ms
-----> 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 Node.js app.
 !     Push failed

some answers here in Stackoverflow suggested to delete theyarn.lock, so I tried it, but it failed again. Any help would be appreciated.

Solved!

After more than 30 Hours of researching I finally managed to deploy my app to heroku.

I'm going to tell you how I succeed. So, anyone in the future struggled with the same problem can solve it to save your time.

Solution: First thing to do is creating a file I named it server.js and copy past following code.

const express = require('express');

const app = express();

const path = require('path');

const port = process.env.PORT || 5000;

if(process.env.NODE_ENV === 'production'){
    app.use(express.static('build'));
    app.get('/*', (req, res) => {
        res.sendFile(path.resolve(__dirname, 'build', 'index.html'))
    })
}

app.listen(port, (err) => {
    if(err){
        return console.log(err);
    }
    console.log('Server running on port ', port);
})

note: don't forget to install express. run yarn add express if you're using yarn or npm i express if you use npm.

Add NODE_ENV='production' to heroku by typing `heroku config:set NODE_ENV='production'.

create a file called Procfile in your root directory and put this inside it web: yarn start this is because in my case I used the yarn as a package manage, if you're using npm you don't need to do this as heroku run npm start by default.

note: don't forget to add the node Buildpack, you can do so, either using heroku CLI or in their website.( you will find it in the app settings section on their website).

in your package.json file repalce "start":"react-script start" with "start": "node server.js".

Finally, push your code to heroku.

That's it. I hope it would be helpfull.

Upvotes: 0

Views: 700

Answers (1)

Umer Aziz
Umer Aziz

Reputation: 111

Solved: I also facing the same Problem .after trying soo many solutions & I fix this issue by :

"version": "0.1.0",
  "engines": {
    "node": "14.x"
  },

just need to specify the node version in your package.json file..

  • Problem occurs only in node version if you use 16.x just use 14.x

Upvotes: 2

Related Questions