Search code examples
githerokuweb-deployment

Heroku build successfully but has application error




-----> Node.js app detected

       

-----> Creating runtime environment

       

       NPM_CONFIG_LOGLEVEL=error

       NODE_ENV=production

       NODE_MODULES_CACHE=true

       NODE_VERBOSE=false

       

-----> Installing binaries

       engines.node (package.json):  12.18.2

       engines.npm (package.json):   6.14.5

       

       Resolving node version 12.18.2...

       Downloading and installing node 12.18.2...

       npm 6.14.5 already installed with node

       

-----> Restoring cache

       Cached directories were not restored due to a change in version of node, npm, yarn or stack

       Module installation may take longer for this build

       

-----> Installing dependencies

       Installing node modules

       

       > core-js@2.6.11 postinstall /tmp/build_1885a6d5_/node_modules/babel-runtime/node_modules/core-js

       > node -e "try{require('./postinstall')}catch(e){}"

       

       

       > fsevents@1.2.13 install /tmp/build_1885a6d5_/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_1885a6d5_/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_1885a6d5_/node_modules/core-js

       > node -e "try{require('./postinstall')}catch(e){}"

       

       

       > fsevents@1.2.13 install /tmp/build_1885a6d5_/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_1885a6d5_/node_modules/core-js-pure

       > node -e "try{require('./postinstall')}catch(e){}"

       

       

       > node@14.8.0 preinstall /tmp/build_1885a6d5_/node_modules/node

       > node installArchSpecificPackage

       

       + node-linux-x64@14.8.0

       added 1 package in 3.217s

       found 0 vulnerabilities

       

       added 1844 packages in 34.352s

       

-----> Build

       Running build

       

       > myweb@0.1.0 build /tmp/build_1885a6d5_

       > react-scripts build

       

       Creating an optimized production build...

       Compiled with warnings.

       

       ./src/components/avaliabletime.jsx

         Line 12:29:  Expected to return a value at the end of arrow function  array-callback-return

       

       ./src/components/projects.jsx

         Line 2:27:  'Col' is defined but never used  no-unused-vars

       

       ./src/components/navbar.jsx

         Line 34:13:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

       

       ./src/components/footer.jsx

         Line 5:10:  'userInfo' is defined but never used  no-unused-vars

       

       Search for the keywords to learn more about each warning.

       To ignore, add // eslint-disable-next-line to the line before.

       

       File sizes after gzip:

       

         114.4 KB  build/static/js/2.603dffcf.chunk.js

         25.3 KB   build/static/css/2.8d265221.chunk.css

         4.28 KB   build/static/js/main.c4912821.chunk.js

         770 B     build/static/js/runtime-main.8f152956.js

         129 B     build/static/css/main.ad08ef7b.chunk.css

       

       The project was built assuming it is hosted at /.

       You can control this with the homepage field in your package.json.

       

       The build folder is ready to be deployed.

       You may serve it with a static server:

       

         npm install -g serve

         serve -s build

       

       Find out more about deployment here:

       

         bit.ly/CRA-deploy

       

       

-----> Caching build

       - node_modules

       

-----> Pruning devDependencies

       removed 1 package, updated 1 package and audited 1845 packages in 15.301s

       

       73 packages are looking for funding

         run `npm fund` for details

       

       found 0 vulnerabilities

       

       

-----> Build succeeded!

-----> Discovering process types

       Procfile declares types     -> (none)

       Default types for buildpack -> web

-----> Compressing...

       Done: 133M

-----> Launching...

       Released v6

       https://yulongkelly.herokuapp.com/ deployed to Heroku

I am using Mac and I connected a git hub repository to this app on Heroku. I want to make a change to my website deployed on Heroku before but failed, so I deleted the previous one and created a new app. I also deleted the master branch and create a new branch called main. However, when I deploy the web from the main branch on GitHub it builds successfully but there is an application error on this website. I used axios and fetched a asp.net web API but I have no idea what I should do.


Solution

  • I had the same issue and was able to solve it using this solution:

    npm install serve --s

    Replace scripts in package.json with this:

    "scripts": {
         "dev": "react-scripts start",
         "start": "serve -s build",
         "build": "react-scripts build",
         "test": "react-scripts test --env=jsdom",
         "eject": "react-scripts eject",
         "heroku-postbuild": "npm run build"
    }
    

    For reference, this is where I found this solution (all the credit and thanks to this dev) https://dev.to/urosran/comment/n92j