vendor.js is huge after npm run production - node.js

I am using Laravue Dashboard based on Laravel and Vue.js, running on an online server, not localhost, it is a fresh install, no edits has been conducted.
My Problem is :
After running npm run watch/dev or even npm run production, vendor.js is about 26MB which I find unreasonably big.
I have tried to run npm run report but nothing shows, no errors or data.
Webpack bundle analyzer plugin is configured but stats.json is empty.
Here are dependencies from package.json:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"resources/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"babel-eslint": "^10.0.2",
"babel-plugin-dynamic-import-node": "^2.3.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-vue-jsx": "^3.7.0",
"compression-webpack-plugin": "^2.0.0",
"cross-env": "^3.2.3",
"eslint": "^5.16.0",
"eslint-loader": "^2.2.1",
"eslint-plugin-vue": "^5.2.3",
"husky": "^3.0.2",
"laravel-mix": "^4.1.2",
"laravel-mix-eslint": "^0.1.3",
"lint-staged": "^9.2.1",
"resolve-url-loader": "^2.3.1",
"sass-loader": "^7.1.0",
"script-loader": "^0.7.2",
"svg-sprite-loader": "^4.1.3",
"vue-template-compiler": "2.6.10",
"webpack": "^4.39.1",
"webpack-bundle-analyzer": "^3.4.1"
},
"dependencies": {
"axios": "^0.18.1",
"camelcase": "^5.3.1",
"clipboard": "^2.0.4",
"core-js": "^3.1.4",
"driver.js": "^0.9.7",
"dropzone": "^5.5.1",
"echarts": "^4.1.0",
"element-ui": "^2.11.1",
"file-saver": "^2.0.1",
"fuse.js": "^3.4.5",
"js-cookie": "^2.2.0",
"jsonlint": "^1.6.3",
"jszip": "^3.2.2",
"node-sass": "^4.12.0",
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"path-to-regexp": "^3.0.0",
"screenfull": "^4.2.1",
"sortablejs": "^1.8.4",
"tui-editor": "^1.4.5",
"vue": "2.6.10",
"vue-count-to": "^1.0.13",
"vue-i18n": "^8.12.0",
"vue-router": "^3.0.7",
"vue-splitpane": "^1.0.4",
"vuedraggable": "^2.23.0",
"vuex": "3.1.0",
"xlsx": "^0.14.4"
}
In the official laravue demo https://laravue.dev/, vendor.js is ~4MB.
I cannot find any reason for this issue, would somebody offer any advise please?

Solved
After hours of inspecting, I found out that " npm run production " wasn't finishing because of memory shortage, this is why no errors were returned, the process was killed at some point with no messages.
simply restarted server and re-ran command.. Worked like magic.

May be if you remove some package that is not needed, will reduce vendor file size more.

Related

Azure DevOps build pipeline - npm ci - Unexpected end of JSON input

I have Azure DevOps build pipeline configured to build NPM application, that includes the following tasks:
Install Node.js (Node.js tool installer) - Version Spec 10.x
npm ci (npm task)
And it almost always fails on the npm ci task, with error:
SyntaxError: Unexpected end of JSON input while parsing near ' and then some random string, each time different.
If I re-run the job manually, it will works. Then, at the next build, it fails again (until I manually rerun it again).
I am also using Azure Artifacts feed with configured Upstream sources to https://registry.npmjs.org/ and npm ci task is configured to use packages from this registry.
I have tried to:
remove Artifacts feed and create a new one
remove Install Node.js task
change node version
change npm ci to npm install
and nothing works. How else can I fix that?
EDIT - 03 April 2020
Here is my package.json - I've removed some of the private data.
There are two private packages, #project-name/jodit-vue and #project-name/vuex-orm-plugin-axios hosted on Azure Artifacts - those are forks of jodit-vue and vuex-orm-plugin-axios with some customizations.
Also, less builds failed recently. About one in 8 builds fails now.
{
"name": "name",
"version": "1.0.0",
"private": true,
"scripts": {
},
"dependencies": {
"#project-name/jodit-vue": "^1.2.4-fix",
"#project-name/vuex-orm-plugin-axios": "0.5.0",
"#stomp/stompjs": "^5.4.2",
"#vuex-orm/core": "^0.33.0",
"axios": "^0.19.0",
"chart.js": "^2.9.3",
"chartjs-plugin-colorschemes": "^0.4.0",
"core-js": "^3.4.8",
"crypto-js": "^3.1.9-1",
"drag-drop-touch": "^1.3.0",
"emoji-mart-vue-fast": "^6.1.2",
"file-saver": "^2.0.2",
"jquery": "^3.4.0",
"lodash": "^4.17.14",
"moment": "^2.24.0",
"oidc-client": "^1.9.1",
"shepherd.js": "^5.0.1",
"vue": "^2.6.10",
"vue-chartjs": "^3.5.0",
"vue-class-component": "^7.1.0",
"vue-cookie-law": "^1.8.0",
"vue-cropperjs": "^4.0.0",
"vue-i18n": "^8.15.1",
"vue-matomo": "^3.13.0-0",
"vue-property-decorator": "^8.3.0",
"vue-recaptcha": "^1.3.0",
"vue-router": "^3.1.3",
"vue-stripe-elements-plus": "^0.2.8",
"vuejs-logger": "^1.5.3",
"vuetify": "^1.5.21",
"vuex": "^3.1.2",
"vuex-oidc": "^3.3.1",
"xlsx": "^0.15.2"
},
"devDependencies": {
"#babel/core": "^7.7.5",
"#babel/plugin-transform-runtime": "^7.7.6",
"#babel/preset-env": "^7.7.6",
"#babel/preset-typescript": "^7.7.4",
"#kazupon/vue-i18n-loader": "^0.4.1",
"#storybook/addon-actions": "^5.3.13",
"#storybook/addon-docs": "^5.3.13",
"#storybook/addon-knobs": "^5.3.13",
"#storybook/addon-links": "^5.3.13",
"#storybook/addon-viewport": "^5.3.13",
"#storybook/vue": "^5.3.13",
"#types/chai": "^4.1.6",
"#types/crypto-js": "^3.1.43",
"#types/file-saver": "^1.3.1",
"#types/jquery": "^2.0.47",
"#types/lodash": "^4.14.119",
"#types/mocha": "^2.2.46",
"#types/sinon": "^7.0.13",
"#types/stripe": "^5.0.24",
"#types/stripe-v3": "^3.0.8",
"#types/webpack": "^4.4.14",
"#types/webpack-env": "^1.13.6",
"#vue/cli": "^4.1.1",
"#vue/cli-plugin-babel": "^4.1.1",
"#vue/cli-plugin-eslint": "^4.1.2",
"#vue/cli-plugin-pwa": "^4.1.1",
"#vue/cli-plugin-typescript": "^4.1.1",
"#vue/cli-plugin-unit-jest": "^4.1.1",
"#vue/cli-plugin-unit-mocha": "^4.1.1",
"#vue/cli-service": "^4.1.1",
"#vue/eslint-config-typescript": "^4.0.0",
"#vue/test-utils": "1.0.0-beta.29",
"babel-loader": "^8.0.6",
"babel-plugin-transform-imports": "^2.0.0",
"chai": "^4.2.0",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"moment-locales-webpack-plugin": "^1.1.2",
"node-sass": "^4.13.0",
"react": "^16.12.0",
"react-is": "^16.12.0",
"sass-loader": "^8.0.0",
"sinon": "^7.4.1",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"typescript": "^3.7.4",
"vue-cli-plugin-i18n": "^0.6.0",
"vue-cli-plugin-storybook": "^1.2.0",
"vue-cli-plugin-vuetify": "^2.0.2",
"vue-jest": "^3.0.4",
"vue-loader": "^15.7.1",
"vue-template-compiler": "^2.6.10"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
SOLVED (partially) - 15 April 2020
I have changed npm ci to npm install a few days ago. No more fails, every build finished successfully since this change.
install is slower that ci but we can spend one more minute in each build but be sure that it will not fail.

Problem with deploying to Google Cloud App Engine

I'm trying to deploy my app to Google Cloud, but I still receive error:
ERROR: (gcloud.app.deploy) Error Response: [9]
Application startup error:
> biurovue#1.0.0 start /app
> node build/dev-server.js
internal/modules/cjs/loader.js:638
throw err;
^
Error: Cannot find module 'chalk' .....
My app is built with nodejs, back end is in Express and Sequalizer and front end is in vuejs.
I'm calling
gcloud int
gcloud app deploy
and then, after few minutes error above occures.
I've tried several times:
npm install chalk
also, I've removed node_modules folder and call npm install from the scratch. Didn't help.
My package.json is following:
{
"name": "biurovue",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "Shark <arek.shark#gmail.com>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js -- single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"#okta/jwt-verifier": "0.0.11",
"axios": "^0.18.0",
"cors": "^2.8.4",
"each-async": "^1.1.1",
"easy-async": "^1.0.0",
"finale-rest": "^1.0.6",
"indent-string": "^4.0.0",
"sequelize": "^4.37.6",
"sqlite3": "^4.1.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuedraggable": "^2.23.0"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.1",
"babel-loader": "^7.1.2",
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"chai": "^4.1.2",
"chalk": "^2.4.2",
"chromedriver": "^2.33.1",
"connect-history-api-fallback": "^1.4.0",
"copy-webpack-plugin": "^4.1.1",
"cross-env": "^5.0.5",
"cross-spawn": "^5.1.0",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"eslint": "^4.9.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.6.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.3",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.5",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.4",
"inject-loader": "^3.0.1",
"karma": "^1.7.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.4",
"karma-phantomjs-shim": "^1.5.0",
"karma-sinon-chai": "^1.3.2",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.5",
"mocha": "^4.0.1",
"nightwatch": "^0.9.16",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.3.0",
"phantomjs-prebuilt": "^2.1.15",
"rimraf": "^2.6.2",
"selenium-server": "^3.6.0",
"semver": "^5.4.1",
"shelljs": "^0.7.8",
"sinon": "^4.0.1",
"sinon-chai": "^2.14.0",
"sw-precache-webpack-plugin": "^0.11.4",
"uglify-es": "^3.1.3",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.7.1",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
What can be a problem? How to solve? diagnose errors like this?
Thanks.
Move them into dependencies. devDependencies should really only be used, as its name suggests, for development. Suppose you have a package which in turn has multiple dependencies. Suppose you are using mochaJS, chaiJS and sinonJS to achieve full test coverage. The end-user installing your package most likely wouldn't want to install the testing and/or documentation frameworks you used as well. Thus, those frameworks would be placed on devDependencies. In this case, because chalk and shellJS are required at runtime they would have to be placed in dependencies.
Summary: Use dependencies for packages required at runtime and devDependencies for packages required only to develop ( testing frameworks, linting, etc. )

webpack-dev-server Error: EPERM: operation not permitted, stat 'D:\System Volume Information'

After I reinstalled my Windows and cloning project from GitHub, I am getting npm Error: EPERM: operation not permitted D:\System Volume Information
In terminal I run:
webpack-dev-server --open --config webpack.dev.js
And it compiles all good but when I open my browser on http://localhost:8000/ it says:
Internal Server Error
When I check terminal I can see:
i 「wdm」: Compiled successfully.
Error: EPERM: operation not permitted, stat 'D:\System Volume Information'
So my webpack compiles all good, the problem is when I try to open it at localhost:8000
Already tried
removing node_modules
npm cache clean --force
npm install npm#6.4.0 & npm#6.3.0
reinstalling node.js
using port 9000
running terminal as administrator
reinstalling webpack-dev-server
disabling kaspersky antivirus
deleting files from C:\Users\.config\configstore\
{
"name": "site",
"version": "1.0.0",
"main": "webpack.base.js",
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js "
},
"author": "",
"license": "ISC",
"dependencies": {
"#babel/plugin-syntax-optional-catch-binding": "^7.0.0",
"#babel/plugin-transform-async-to-generator": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"#babel/template": "^7.1.2",
"#babel/types": "^7.1.3",
"adjust-sourcemap-loader": "^1.2.0",
"autoprefixer": "^9.3.1",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^4.1.3",
"debug": "^4.1.0",
"detect-libc": "^1.0.3",
"glob": "^7.1.3",
"gsap": "^2.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"imagemin-pngquant": "^5.1.0",
"jquery": "^3.3.1",
"locate-path": "^3.0.0",
"lodash": "^4.17.11",
"lodash._baseassign": "^3.2.0",
"lodash._basecopy": "^3.0.1",
"lodash.isarguments": "^3.1.0",
"lodash.keys": "^4.2.0",
"ms": "^2.1.1",
"npm": "^6.5.0",
"only": "0.0.2",
"owl.carousel": "^2.3.4",
"pngquant-bin": "^3.1.1",
"popper.js": "^1.14.4",
"pretty-error": "^2.1.1",
"raw-loader": "^0.5.1",
"svg-url-loader": "^2.3.2",
"toposort": "^2.0.2",
"uglifyjs-webpack-plugin": "^2.0.1",
"update": "^0.7.4",
"util-promisify": "^2.1.0",
"webpack-cli": "^3.1.2"
},
"devDependencies": {
"#babel/cli": "^7.1.2",
"#babel/core": "^7.1.5",
"#babel/parser": "^7.1.3",
"#babel/preset-env": "^7.1.6",
"#webpack-cli/init": "^0.1.2",
"babel-loader": "^8.0.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"critters-webpack-plugin": "^2.0.1",
"css-loader": "^1.0.1",
"eslint": "^5.9.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-critical-webpack-plugin": "^2.1.0",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.9.4",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss-loader": "^3.0.0",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"resolve-url-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"svg-inline-loader": "^0.8.0",
"url-loader": "^1.1.2",
"webpack": "^4.26.0",
"webpack-manifest-plugin": "^2.0.4",
"webpack-merge": "^4.1.4"
},
"description": ""
}
Versions
npm -v 6.5.0
node -v 11.4.0
Windows 10.0.17134
I solve this issue by opening Visual Studio Code in Admin Mode.
Actually problem was because webpack-dev-server watched wrong files.
Fix
Change your public path of webpack-dev-server and it should work

Can't execute Electron app on other devices after packaging(edit: nfc library is the cause)

I have an electron app that uses Vue.js.
I ran electron-packager and got a nice looking folder. When I run the executable on my own computer it works. The window is displayed, and everything works great.
However, if I run it at any other winx64 computer it fails.
No error is displayed, running through cmd doesn't display anything and background processes are started, but the window doesn't open.
So I thought maybe it's a dependency issue. However, I have both dependencies installed. I have googled for ages but cant find out what the issue is.
"dependencies": {
"axios": "^0.18.0",
"electron-log": "^2.2.14",
"electron-logger": "^0.0.3",
"electron-packager": "^12.1.0",
"moment": "^2.22.1",
"nfc-pcsc": "^0.6.2",
"vue": "^2.0.1",
"vue-config": "^1.0.0",
"vue-momentjs": "^0.1.2",
"vue-router": "^3.0.1",
"vuetify": "^1.0.17"
},
"devDependencies": {
"#babel/core": "^7.0.0-beta.46",
"#babel/plugin-proposal-class-properties": "^7.0.0-beta.46",
"#babel/polyfill": "^7.0.0-beta.46",
"#babel/preset-env": "^7.0.0-beta.46",
"#babel/register": "^7.0.0-beta.46",
"babel-loader": "8.0.0-beta.2",
"cross-env": "^5.1.4",
"css-loader": "^0.28.11",
"devtron": "^1.4.0",
"electron": "^2.0.0",
"electron-debug": "^1.5.0",
"electron-rebuild": "^1.7.3",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"rimraf": "^2.6.2",
"vue-devtools": "^3.1.9",
"vue-loader": "^15.0.9",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.8.0",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
}
Edit:
I found out the nfc-pcsc library i'm using is the root of my problem.. No idea why and how to solve it... Im gonna dig in a bit further. Any idea's wy?

Deploy Django/React application heroku

I have deployed django app on heroku, and everything is fine, no errors, etc. I'm using react on frontend, and I want to do npm install, gulp build so I can configurate my app properly.
I can not run heroku run npm install, all I have is bash: npm: command not found, and I suppose that is ok because I need to trigger it somehow when he is building the app on the server, so I've modify my package.json like this:
{
"name": "Test app",
"version": "1.0.0",
"description": "Testing",
"main": "bundle.js",
"scripts": {
"postinstall": "npm install"
},
"dependencies": {
"bootstrap": "^3.3.7",
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"engines": {
"node": "8.0.0",
"npm": "5.0.4"
},
"author": "",
"license": ""
}
But that still does not trigger npm install process on deployment, so can any one help me understand how can I configurate this properly?
This is my Procfile:
web: python manage.py runserver 0.0.0.0:$PORT --noreload
worker: python worker.py
Heroku supports different server-side languages via buildpacks:
Buildpacks are responsible for transforming deployed code into a slug, which can then be executed on a dyno. Buildpacks are composed of a set of scripts, and depending on the programming language, the scripts will retrieve dependencies, output generated assets or compiled code, and more.
Since the Python part of your application seems to be installing correctly Heroku must be detecting it as a Python application (because it includes a requirements.txt file) or you have configured it as one manually. In many cases a single buildpack is sufficient.
However, since you are also using Node.js you should enable a second buildpack:
There are many scenarios in which a single buildpack is not sufficient when building an application. This includes cases when you need to:
Run a buildpack for each language your app uses. For example, run a JavaScript buildpack for assets and a Ruby buildpack for your application.
The basic flow looks like this (using the Heroku CLI on your development machine):
heroku buildpacks:set heroku/python
heroku buildpacks:add --index 2 heroku/nodejs
The links I provided above contain many more details. I recommend reading both of them in their entirety.

Resources