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.
Related
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"
}
}
I have a react + express project where I do server side rendering. My folder structure is like this
root
client
build
node_modules
public
src
package.json
node_modules
routes
server.js
package.json
I have two Heroku dynos app-dev and app-prod and I use app-dev for development and app-prod for production and their environments have been set to dev and prod accordingly. My package.json looks like this
{
"name": "name",
"version": "1.0.0",
"description": "",
"main": "server.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server",
"server": "nodemon server",
"client": "npm start --prefix client",
"build": "cd client/ && npm install && npm run build",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "",
"license": "ISC",
"dependencies": {
"body-parser": "^1.18.3",
"chalk": "^4.1.1",
"concurrently": "^6.1.0",
"connect-mongo": "^3.2.0",
"cookie-parser": "^1.4.3",
"cookie-session": "^2.0.0-beta.3",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"express": "^4.16.4",
"express-session": "^1.15.6",
"express-validator": "^6.11.1",
"mongoose": "^5.4.1",
"mongoose-findorcreate": "^3.0.0",
"morgan": "^1.10.0",
"passport": "^0.4.0",
"passport-google-oauth": "^2.0.0",
"passport-google-oauth20": "^2.0.0",
"passport-twitter": "^1.0.4",
"redux-thunk": "^2.3.0",
"http-proxy-middleware": "^2.0.0"
}
}
Now I have got a constants file in my client/src folder that had these
// Constants.js
const prod = {
url: {
SS_API_URL: 'https://prod.example.com',
},
keys:{
SS_CLIENT_ID: 'prodClientId',
SS_X_API_KEY: 'prodApiKey',
}
};
const dev = {
url: {
SS_API_URL: 'https://dev.example.com',
},
keys:{
SS_CLIENT_ID: 'devClientId',
SS_X_API_KEY: 'devApiKey',
}
};
export const config = process.env.NODE_ENV === 'development' ? dev : prod;
Now when I upload to Heroku (app-dev) and it builds it, after that it seems to be using the prod.example.com instead of dev.example.com API endpoint. Since the NODE_ENV is development I thought it would take the SS_API_URL for dev but it is taking the SS_API_URL for prod
You can add this variable on settings menu, "Config Vars", inside your heroku project. So you add NODE_ENV and value "production".
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.
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
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'),
},
],}}