Node.js web application doesn't work after deploying on heroku - node.js

I am new to MERN stack development. I made a MERN project, a social media app. I finished and deployed it. It works fine only in chrome browser on my laptop (which I used for development) and when I tried to test on other browser, it just loads and shows blank, with error :
redux.js:653 Uncaught TypeError: Cannot read properties of undefined (reading 'apply').
How do I troubleshoot this ?
Here's package file for DevComm :
{
"name": "devcomm",
"version": "1.0.0",
"description": "social network for developers",
"main": "server.js",
"engines": {
"node": "14.17.3"
},
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"author": "Adarsh",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.19.2",
"concurrently": "^7.0.0",
"express": "^4.17.3",
"gravatar": "^1.8.2",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.2.6",
"passport": "^0.5.2",
"passport-jwt": "^4.0.0",
"validator": "^13.7.0"
},
"devDependencies": {
"nodemon": "^2.0.15"
}
}

Related

how can I solve the Module not found: Can't resolve 'fs' error

I don't understand this problem, as I am not using the fs module anywhere, I deleted all the node_modules and package.json and package-lock and reinstalled everything and upgraded node, still get the same error
here is my package.json file for the server side.
{
"name": "todoapp",
"version": "1.0.0",
"description": "",
"main": "backend/server.js",
"type": "module",
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm run dev --prefix frontend",
"build": "npm run build --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"data:import": "node backend/seeder",
"data:destroy": "node backend/seeder -d"
},
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.21.1",
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"concurrently": "^6.2.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.17.1",
"express-async-handler": "^1.1.4",
"js-cookie": "^2.2.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.14",
"nodemon": "^2.0.7",
"slugify": "^1.5.3"
}
}
fs is server-side only e.g you can't use it during page rendering.

how to run react project with web pack which contains frontend and backend

I am having problem with running the project, the project is contains the frontend(react) and backend(node) how should run the frontend side for the project
{
"version": "1.0.0",
"description": "' open source project",
"main": "index.js",
"dependencies": {
"bootstrap": "^4.5.2",
"express": "^4.17.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"reactstrap": "^8.6.0"
},
"devDependencies": {
"#babel/core": "^7.11.6",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-proposal-function-bind": "^7.11.5",
"#babel/preset-env": "^7.11.5",
"#babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0",
"css-loader": "^4.3.0",
"style-loader": "^1.2.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12"
},
"scripts": {
"serve": "node src/backend/main.js",
"watch": "webpack --mode=development -d --watch",
"build": "webpack --mode=production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": { "type": "git", "url": "" },
"keywords": [],
"author": "",
"license": "ISC",
"bugs": { "url": "" },
"homepage": ""
}
If you want to run frontend(React) and backend(Node) at the same time install concurrently and nodemon.
npm i concurrently
npm install -g nodemon
then at the package.json file add concurrently to run both frontend and backend together.
"scripts": {
"start": "node server/index.js",
"backend": "nodemon server/index.js",
"frontend": "npm run start --prefix client",
"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""
},
If you want to run only your frontend go to client folder and open your terminal and type
npm start or yarn start

Heroku push fails with remote rejected

I get this error message:
Heroku push rejected, failed to compile Node.js app. [remote rejected]
master -> master (pre-receive hook declined) error: failed to push
some refs
package.json
{
"name": "devconnector",
"version": "1.0.0",
"description": "Social network for developers",
"engines": {
"node": "8.11.4"
},
"main": "server.js",
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"author": "Cara Adelson",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"concurrently": "^4.1.0",
"express": "^4.16.4",
"gravatar": "^1.6.0",
"jsonwebtoken": "^8.4.0",
"mongoose": "^5.3.12",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"validator": "^10.9.0"
},
"devDependencies": {
"nodemon": "^1.18.6"
}
}
Add your node_modules folder to .gitignore. This page may help you.

ES5: 'use strict' within dependency fails to be minified by Heroku

I am trying to deploy on Heroku, where I'm given the following error:
remote: Failed to minify the code from this file:
remote: ./node_modules/webhoseio/webhoseio.js:13
Upon inspecting this dependency, I found that it uses the ES5 'use strict'; declaration. How can I have Heroku compile this dependency?
EDIT: Package.json file
{
"name": "stocks-app",
"version": "1.0.0",
"description": "Mern Demo",
"main": "server.js",
"scripts": {
"start": "if-env NODE_ENV=production && npm run start:prod || npm run start:dev",
"start:prod": "babel-node server.js",
"start:dev": "concurrently \"nodemon --ignore 'client/*'\" \"npm run client\"",
"client": "cd client && npm run start",
"install": "cd client && yarn install",
"build": "cd client && npm run build",
"heroku-postbuild": "npm run build"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"concurrently": "^4.1.0",
"nodemon": "^1.18.9"
},
"dependencies": {
"alphavantage": "^1.2.0",
"axios": "^0.18.0",
"brain.js": "^1.6.0",
"cors": "^2.8.5",
"dotenv": "^6.2.0",
"express": "^4.16.3",
"if-env": "^1.0.4",
"mdbreact": "^4.8.5-patch.1",
"mongoose": "^5.4.0",
"newsapi": "^2.4.0",
"request": "^2.88.0",
"webhoseio": "^1.0.2"
}
}
I resolved this by turning off minification in my Webpack config. Instead of using the CRA-preconfigured Webpack ES-Lint loader, I installed the HTML-Loader and set loader to that. Following, I set minimize to false. Here's how:
module: {
rules: [
{
use: [
{
options: {
formatter: eslintFormatter,
eslintPath: require.resolve('eslint'),
minimize: false,
},
loader: require.resolve('html-loader'),
},
],}}

How to handle routes Heroku Create React App with express?

I have a create-react-app project which proxies a node express server at port 5000.
When we deploy it locally, all the requests get routed from client to the backend server and intermediate pages get rendered properly.
However, when I deploy it to Heroku, the flow always has to start from / route as any other URL directly hits the express server instead of being routed from front end.
Eg: https://consumesafe-dev.herokuapp.com works
But https://consumesafe-dev.herokuapp.com/dashboard goes directly to the node server instead of being proxied from front end.
here is the package.json for server:
{
"name": "example-create-react-app-express",
"version": "1.0.0",
"scripts": {
"client": "cd client && yarn start",
"server": "nodemon server.js",
"test": "cd client && npm install && yarn test",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
"dependencies": {
"#google-cloud/language": "^1.0.0",
"#google-cloud/vision": "^0.12.0",
"async": "^2.6.0",
"body-parser": "~1.4.2",
"express": "^4.16.2",
"google-cloud": "^0.57.0",
"https": "^1.0.0",
"method-override": "~2.0.2",
"nodemon": "^1.17.3",
"pg": "^7.4.1",
"request": "^2.83.0",
"sequelize": "^4.37.2",
"winston": "^2.4.1"
},
"devDependencies": {
"concurrently": "^3.5.1"
}
}
and the package.json from client:
{
"name": "example-create-react-app-express",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000/",
"dependencies": {
"bootstrap": "^3.3.7",
"firebase": "^3.6.1",
"material-ui": "^0.20.0",
"react": "^16.2.0",
"react-checkbox-group": "^4.0.1",
"react-dom": "^16.2.0",
"react-event-timeline": "^1.5.1",
"react-notification-system": "^0.2.17",
"react-router-dom": "^4.2.2"
},
"devDependencies": {
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

Resources