I continue to have issues deploying to Heroku and I can't find out what is going wrong for the life of me. The Heroku error log tells me this after it successfully builds my react app:
-----> Caching build
- node_modules
-----> Pruning devDependencies
npm ERR! Cannot read property 'match' of undefined
Here is my package.json
{
"name": "test",
"version": "1.0.0",
"homepage": "./",
"description": "test",
"main": "server.js",
"node": "v12.13.1",
"npm": "6.13.7",
"scripts": {
"heroku": "node server.js",
"client-install": "npm install --prefix client",
"build": "cd client && react-scripts build",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "John Doe",
"license": "MIT",
"dependencies": {
"#material-ui/core": "^4.8.0",
"axios": "^0.19.0",
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"classnames": "^2.2.6",
"concurrently": "^5.1.0",
"date-fns": "^2.8.1",
"debug": "^4.1.1",
"depcheck": "^0.9.1",
"eslint-plugin-flowtype": "^4.6.0",
"express": "^4.16.4",
"fibers": "^4.0.2",
"growl": "^1.10.5",
"heroku": "^7.35.1",
"history": "^4.10.1",
"is-empty": "^1.2.0",
"jquery": "^3.4.1",
"jsonwebtoken": "^8.3.0",
"jwt-decode": "^2.2.0",
"material-table": "^1.54.2",
"material-ui": "^0.20.2",
"minimatch": "^3.0.4",
"moment": "^2.23.0",
"mongodb": "^3.5.3",
"mongoose": "^5.8.9",
"mongoose-global": "^1.0.1",
"morgan": "^1.9.1",
"node-sass": "^4.13.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"plaid": "^4.6.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-ga": "^2.7.0",
"react-plaid-link-button": "0.0.4",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"react-slick": "^0.25.2",
"react-stripe-elements": "^6.0.1",
"react-vis": "^1.11.7",
"redux-thunk": "^2.3.0",
"sass": "^1.24.0",
"slick": "^1.12.2",
"slick-carousel": "^1.8.1",
"typescript": "^3.7.4",
"update-mongo": "0.0.4",
"validator": "^12.2.0",
"vis": "^4.21.0-EOL"
},
"devDependencies": {},
"engines": {
"node": "12.x"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
What is perhaps most frustrating, is that I was able to deploy successfully once the other day but I am not sure what changed. Going back through my git I can't see anything that would have made any difference.
Things I have tried:
removing package.json
adding "devDependencies": {} to my package.json (although I
deployed successfully without it)
updating node and adding the engines section to my package.json to
match.
running npm prune locally
ensuring that all packages are updated and referenced appropriately in package.json
Things that I suspect could be the issue:
Maybe somehow the current version of my app that is actively deployed on heroku is interfering with my new deployment? That being said i have tried scaling down dynos and deploying. Additionally the npm ERR! Cannot read property 'match' of undefined seems to indicate something else?
Just run into this after my deploys inexplicably started failing after a number of successful ones.
Stopping heroku from caching node_modules seemed to do the trick for me.
heroku config:set NODE_MODULES_CACHE=false
Then git push heroku master
I don't have package-lock.json committed after hearing Heroku doesn't get on well with lockfiles, but wondering if that's the problem.
Please rm -rf node_modules && npm i
also be sure to track package-lock.json file
And as long as you are there, is not related but may be a good idea to add a .nvmrc file
node -v >> .nvmrc
Let us know if it helped
In the scripts section in package.json, only keep the start key and remove others.
Your scripts in the package.json should be,
"scripts": {
"start": "node server.js"
},
Also before deployment, build the react app manually.
Heroku messed up with all these build scripts.
Related
i'm new with node, i have to deploy my first application.
this is my package.json:
{
"name": "tbcw",
"description": "TheBestCollectors",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"truffle-compile": "truffle compile",
"truffle-serve": "truffle serve",
"truffle-test": "truffle test --network test"
},
"dependencies": {
"vue": "^2.4.4",
"vue-draggable-resizable": "^1.5.1",
"vuex": "^2.4.1",
"web3": "^1.2.11"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^6.0.0",
"babel-preset-env": "^1.7.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"ejs": "^2.5.7",
"ejs-compiled-loader": "^2.2.0",
"eslint": "^4.8.0",
"ethereumjs-testrpc": "^4.1.3",
"file-loader": "^0.9.0",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"node-sass": "^4.9.4",
"null-loader": "^0.1.1",
"sass-loader": "^5.0.1",
"truffle": "^3.4.11",
"truffle-contract": "^1.1.6",
"vue-loader": "^12.1.0",
"vue-template-compiler": "^2.4.4",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.9.1"
}
}
in local with dev mode everything works correctly.
Now I would like to publish my app on heroku.
after uploading the files with herokuCLI, when i run the app, I get an error page.
reading them via the command "heroku logs --tail"
based on different attempts i got different errors, like webpack not found, start script not found, cross-env not found...
how can i proceed?
Please let me know if you need more info.
thank you for all the replies
Looking at your package.json, it seems your are working on a client-side application. Such applications run in the client's browser, rather than in Node. Heroku is for running server-side applications, so it's probably not the right place to deploy your app.
Take a look at something like Vercel or Netlify instead. They provide tools to automatically build and deploy client-side applications to edge networks with only a few clicks.
Heroku, by default, doesn't install devDependencies. It seems your cross-env and webpack are listed as devDependencies. And you don't even have a start script.
I am new to reactjs and trying to run code but showing error. I m not getting proper solution about this error.
I newly install reactjs , node js and running first time on xampp localhost. I tried
npm install #babel/core --> this installed #babel/core 7.4.4
npm install babel-core --save-dev --> this set babel/core to 6.26
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1"
},
"devDependencies": {
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^3.2.0"
}
}
I already run npm command from command prompt to update babel/core and expecting upgradation but every time same version and showing error.
highlighted area in image with blue color is main error to solve
its not an option for you to use react from cdn?
https://reactjs.org/docs/cdn-links.html
How you are a rookie, i recommend to use cdn and "web server for chorme", chorme extention. After get some experience you can jump to node stuff.
Hi every one I am new on heroku,
If I clone from github repo and run >npm install and >npm start on computer its working fine, but on my heroku app it showing error:
Failed to compile ./node_modules/bootstrap/dist/js/bootstrap.js Module
not found: Can't resolve 'popper.js' in
'/app/node_modules/bootstrap/dist/js'
Heroku app: https://nfq-barber-shop.herokuapp.com/
Github repo: https://github.com/ezopas/nfq-barber-shop
I try run these commands:
npm install bootstrap -D
npm install jquery -D
npm install popper.js -D
But still its the same error. What I should to do? My app runs totally fine on other computers (npm start).
package.json:
{
"name": "nfq-barber-shop-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"font-awesome": "^4.7.0",
"fullcalendar": "^3.10.0",
"fullcalendar-reactwrapper-with-scheduler": "^1.1.0",
"jquery.nicescroll": "^3.7.6",
"moment": "^2.24.0",
"nav-scroll-spy": "^1.0.2",
"node-sass": "^4.11.0",
"react": "^16.8.1",
"react-dom": "^16.8.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "2.1.5",
"redux": "^4.0.1",
"sweetalert": "^2.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"jquery": "^3.3.1",
"popper.js": "^1.14.7"
}
}
TLDR
Move the modules in devDependencies into the dependencies section
Set the config variable NPM_CONFIG_PRODUCTION to false in the Heroku settings
Explanation
Heroku, in a attempt to reduce the bundle output of your project, does not install devDependencies when it is setting up your project.
The general rule of Node application development is that all modules that require do not contribute to the running of your application must go into your devDependencies and all the modules that do go into the dependencies
From the look of your package.json, you do not necessarily have to put anything in the devDependencies since popper and jQuery do belong in the dependencies section.
You can alternatively set the NPM_CONFIG_PRODUCTION variable in Heroku to false, however this is not the recommended approach, because this technically makes the app not a production application
Go the the bootstrap documentation website and select the appropriate version of bootstrap you are using.
For bootstrap 4, from the docs, add the bootstrapCDN links present in the started template to your index.html file.
For this specific question, add
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
to your index.html.
Note: check the appropriate version for the scripts.
i have a react project with the following package.json :
{
"name": "commonsensev2.0",
"version": "0.1.0",
"private": true,
"homepage": "http://localhost:9080/server/react",
"dependencies": {
"all": "0.0.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"chart.js": "^2.7.3",
"moment": "^2.23.0",
"node-sass-chokidar": "0.0.3",
"npm-run-all": "^4.1.5",
"popper.js": "^1.14.6",
"react": "^16.7.0",
"react-bootstrap": "^0.31.5",
"react-bootstrap-table": "^4.3.1",
"react-chartjs2": "^1.2.1",
"react-dom": "^16.7.0",
"react-localize-redux": "^2.17.5",
"react-moment": "^0.7.9",
"react-redux": "^5.1.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.0.14",
"redux": "^3.7.2"
},
"scripts": {
"build-css": "node-sass-chokidar src/sass/App.scss -o src/css/",
"watch-css": "npm run build-css && node-sass-chokidar src/sass/App.scss -o src/css/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"postbuild": "((ROBOCOPY build ../react /MIR) ^& if %ERRORLEVEL% lss 8 set ERRORLEVEL = 0)",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"bootstrap-toggle": "^2.2.2",
"datatables.net": "^1.10.19",
"numeral": "^2.0.6"
}
}
when i do npm run build i cannot see the changes on the html pages, i m using node 8.11.1 i downgraded it because i found somewhere that it maybe the reason why it does not work i'm also using "node-sass-chokidar": "0.0.3"
and the backend is a java server
I had the same issue, I deleted the old build folder on my local environment and ran npm run build again to generate a new build folder.
Just a wild guess here but I think you are running the wrong command. Because build is typically when you want to build code for a purpose like putting it on a server.
What you need to do is to npm run start, as that has the watch, that watches for changes and updates.
Just a minor thing, I would rename the start script to dev or serve. Generally more used I would say.
I'm trying to deploy a nodejs app to heroku and I am getting the following error when I check the heroku logs,
sh:1: npm-run-all : not found
My package.json looks like this
{
"name": "web-training",
"version": "1.0.0",
"description": "web-training",
"scripts": {
"prestart": "babel-node tools/startMessage.js",
"start": "npm-run-all --parallel open:src lint:watch test:watch",
"open:src": "babel-node tools/srcServer.js",
"lint": "node_modules/.bin/esw webpack.config.* src tools",
"lint:watch": "npm run lint -- --watch",
"test": "mocha --reporter spec tools/testSetup.js \"src/**/*.test.js\"",
"test:watch": "npm run test -- --watch",
"clean-dist": "npm run remove-dist && mkdirp dist-server/dist",
"remove-dist": "node_modules/.bin/rimraf ./dist-server/dist",
"build:html": "babel-node tools/buildHtml.js",
"prebuild": "npm-run-all clean-dist test lint build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node dist-server/server.js"
},
"author": "Cory House",
"license": "MIT",
"dependencies": {
"babel-polyfill": "6.8.0",
"bootstrap": "3.3.6",
"compression": "^1.6.1",
"express": "^4.13.4",
"install": "^0.8.4",
"jquery": "2.2.3",
"material-ui": "^0.16.7",
"npm": "^4.0.5",
"open": "0.0.5",
"rd-react-overlay": "^1.4.2",
"react": "15.0.2",
"react-dom": "15.0.2",
"react-native-search-bar": "^2.16.0",
"react-native-vector-icons": "^4.0.0",
"react-redux": "4.4.5",
"react-router": "2.4.0",
"react-router-redux": "4.0.4",
"react-skylight": "^0.4.1",
"react-tap-event-plugin": "^2.0.1",
"redux": "3.5.2",
"redux-thunk": "2.0.1",
"toastr": "2.1.2"
},
"devDependencies": {
"axios-mock-adapter": "^1.7.1",
"babel-cli": "6.8.0",
"babel-core": "6.8.0",
"babel-loader": "6.2.4",
"babel-plugin-react-display-name": "2.0.0",
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-react-hmre": "1.1.1",
"babel-register": "6.8.0",
"colors": "1.1.2",
"compression": "1.6.1",
"cross-env": "1.0.7",
"css-loader": "0.23.1",
"enzyme": "2.2.0",
"eslint": "2.9.0",
"eslint-plugin-import": "1.6.1",
"eslint-plugin-react": "5.0.1",
"eslint-watch": "2.1.11",
"eventsource-polyfill": "0.9.6",
"expect": "1.19.0",
"express": "4.13.4",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.8.5",
"jsdom": "8.5.0",
"mocha": "2.4.5",
"nock": "8.0.0",
"npm-run-all": "1.8.0",
"open": "0.0.5",
"react-addons-test-utils": "15.0.2",
"react-search-component": "^1.1.2",
"redux-immutable-state-invariant": "1.2.3",
"redux-mock-store": "1.0.2",
"rimraf": "2.5.2",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.0",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.10.0"
},
"repository": {
"type": "git",
"url": "https://github.com/XXX/YYY"
}
}
When I run my app locally with npm run build in the command line, it works perfectly.
Any suggestions?
I'm adding Procfile content:
web:npm run build
I'm not sure that's ok.
You'll need npm-run-all added to your "dependancies" and not on your "devDependancies" in your package.json.
This is because on deploying to Heroku, npm prunes your "devDependancies" when making a production build.
Just wanted to share my experience since I had a similar issue when deploying to Heroku using npm-run-all.
It seems like Heroku runs the start script by default when building the application and is unable to run npm-run-all successfully (I found out after running heroku logs in my terminal). I originally had my scripts like this (notice how I'm using npm-run-all in my start script) and encountered an application error.
I simply changed the start script back to just node server.js and created a new script to run npm-run-all, like this. This worked for me.
(Sorry about the image links. SO won't let me post images unless I have at least 10 reputation.)
Hope this helps anyone else encountering the same problem.
· Firstly make your account in git and heroku
· Install git and heroku on your system..if your using windows must install git bash
· Make your repository in git
· Now find out command below
-git init
-git clone {git repository url}
-cd {repository folder name}
· Copy your code on your local git repository folder
· Open terminal go to your repository folder then apply below commands
-git init
-git add *
-git commit -m "your comment"
-git status
-git push origin master
· Check your git repository on git cloud
· Open new terminal apply below commands
-git clone {repository url}
-cd {repository url}
-heroku login
-heroku create {name of your application on heroku}
-git remote(to verify heroku)
-git push heroku master
-heroku open
**Please follow above steps for deploy your code in heroku*
You can make demo node js project for heroku deployment by using below commands
express {name of project} --ejs
cd {name of project}
npm install
npm start