Unable to install node in Heroku - node.js

Question

I am trying to deploy a Django Application on Heroku with the node and npm installations, however, while deploying the application I get the following error on the Heroku console:
npm ERR! node v11.13.0
npm ERR! npm v2.15.12
npm ERR! path /tmp/build_number/node_modules/.bin/grunt
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall unlink
npm ERR! enoent ENOENT: no such file or directory, unlink '/tmp/build_number/node_modules/.bin/grunt'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! Please include the following file with any support request:
npm ERR! /tmp/build_number/npm-debug.log
-----> Build failed
I am trying to build charts using Vue.js components that uses buildpacks. I would like to know how to install the npm on Heroku. Any help will be greatly appreciated.
I have the following configuration for the website:
Django version: 2.1.7
Node Version: 11.3.0
Python Version: 3.7.3
My package.json file looks as follows:
{
"name": "django",
"private": true,
"scripts": {
"start": "node app",
"poststart": "npm prune --production",
"pretest": "eslint django/ js_tests/admin/ js_tests/gis/",
"test": "grunt test --verbose"
},
"engines": {
"node": "11.13.0",
"npm": ">=1.3.0 <3.0.0",
"build": "bower install && grunt build",
"start": "nf start"
},
"devDependencies": {
"#babel/core": "^7.4.3",
"#babel/plugin-transform-runtime": "^7.4.3",
"#babel/preset-env": "^7.4.3",
"#babel/runtime": "^7.4.3",
"axios": "^0.18.0",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"bootstrap-sass": "^3.4.1",
"css-loader": "^2.1.1",
"eslint": "^5.16.0",
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-qunit": "^1.2.0",
"jquery": "^3.3.1",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-hot-reload-api": "^2.3.3",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.29.6",
"webpack-bundle-tracker": "^0.4.2-beta",
"webpack-cli": "^3.3.0"
},
"description": "FitGirl Inc",
"version": "1.0.0",
"main": "index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/uno-isqa-8950/fitgirl-inc.git"
},
"author": "hghanta",
"license": "ISC",
"bugs": {
"url": "https://github.com/uno-isqa-8950/fitgirl-inc/issues"
},
"homepage": "https://github.com/uno-isqa-8950/fitgirl-inc#readme",
"dependencies": {
"chart.js": "^2.8.0",
"vue-chartjs": "^3.4.2",
"vue-cli": "^2.9.6"
},
"keywords": [
"djano"
]
}
My ProcFile is as follows:
web: node node_modules/gulp/bin/gulp build, gunicorn empoweru.wsgi:application --log-file -
'''

Answer 1

Heroku by default has it's Node modules cache enabled. So when you try to make changes to your package.json Heroku does not recognize your changes to the devDependencies. Follow these two steps and you should be able to deploy it:
Remove grunt-cli from your devDependencies
Run this command to disable cache
heroku config:set NODE_MODULES_CACHE=false
Deploy your code