Error while trying to run npm run build - spring

I have created a simple app with Spring Boot and Angular 4. I tried to run a script which will pack every (npm run build) file from frontend file to the src/main/resources/static file. But I am getting an error which is:
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! tasks#0.0.0 postbuild: `npm run deploy`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tasks#0.0.0 postbuild script 'npm run deploy'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the tasks package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run deploy
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs tasks
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls tasks
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Michał\IdeaProjects\spring-angular2-tasks-master\Spring with Angular 4\src\main\frontend\npm-debug.log
My package.json file looks:
{
"name": "tasks",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy-conf.json",
"build": "ng build -prod",
"postbuild": "npm run deploy",
"predeploy": "rimraf ../resources/static/ && mkdirp ../resources/static",
"deploy": "copyfiles -f dist/** ../resources/static",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^4.1.3",
"#angular/compiler": "^4.1.3",
"#angular/core": "^4.1.3",
"#angular/forms": "^4.1.3",
"#angular/http": "^4.1.3",
"#angular/platform-browser": "^4.1.3",
"#angular/platform-browser-dynamic": "^4.1.3",
"#angular/router": "^4.1.3",
"bootstrap": "^3.3.7",
"copyfiles": "^1.2.0",
"core-js": "^2.4.1",
"mkdirp": "^0.5.1",
"moment": "^2.18.1",
"rimraf": "^2.6.1",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.8.11"
},
"devDependencies": {
"#angular/cli": "^1.0.0",
"#angular/compiler-cli": "^4.1.3",
"#types/jasmine": "2.5.47",
"#types/node": "^7.0.22",
"codelyzer": "~3.0.1",
"jasmine-core": "2.6.2",
"jasmine-spec-reporter": "4.1.0",
"karma": "1.7.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "~5.1.2",
"ts-node": "3.0.4",
"tslint": "^5.3.2",
"typescript": "~2.3.3"
},
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.2.6.",
"main": "karma.conf.js",
"author": ""
}
What am I doing wrong?
UPDATE:
After running npm run deploy I have:
> tasks#0.0.0 predeploy C:\Users\Michał\IdeaProjects\spring-angular2-tasks-master\Spring with Angular 4\src\main\frontend
> rimraf ../resources/static/ && mkdirp ../resources/static
> tasks#0.0.0 deploy C:\Users\Michał\IdeaProjects\spring-angular2-tasks-master\Spring with Angular 4\src\main\frontend
> copyfiles -f dist/** ../resources/static
'copyfiles' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! Windows_NT 10.0.15063
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "deploy"
npm ERR! node v6.9.4
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! tasks#0.0.0 deploy: `copyfiles -f dist/** ../resources/static`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the tasks#0.0.0 deploy script 'copyfiles -f dist/** ../resources/static'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the tasks package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! copyfiles -f dist/** ../resources/static
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs tasks
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls tasks
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Michał\IdeaProjects\spring-angular2-tasks-master\Spring with Angular 4\src\main\frontend\npm-debug.log

Solve it by npm install copyfiles -g

Related

How do I install laravel jetstream with the official documentation?

I seem to not be able to just make things work with jetstream. I have installed using both livewire and inertia option i keep on getting an error regarding vite when trying to npm build
npm run build
> build
> vite build
failed to load config from **APP_ROOT**\\vite.config.js
error during build:
TypeError: import_laravel_vite_plugin.refreshPaths is not iterable
at Object.<anonymous> (**APP_ROOT**\\vite.config.js:41:39)
at Module._compile (node:internal/modules/cjs/loader:1126:14)
at Object._require.extensions.<computed> [as .js] (file:///F:/PROJECTS/HUGE/CoreRahisify/rahisify-core-gateway-api/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63524:24)
at Module.load (node:internal/modules/cjs/loader:1004:32)
at Function.Module._load (node:internal/modules/cjs/loader:839:12)
at Module.require (node:internal/modules/cjs/loader:1028:19)
at require (node:internal/modules/cjs/helpers:102:18)
at loadConfigFromBundledFile (file:///F:/PROJECTS/HUGE/CoreRahisify/rahisify-core-gateway-api/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63532:21)
at loadConfigFromFile (file:///F:/PROJECTS/HUGE/CoreRahisify/rahisify-core-gateway-api/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63400:34)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
After several attempts now i cant even npm install without errors as i get the following errors:
npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: laravel-vite-plugin#0.2.4
npm ERR! Found: vite#3.1.6
npm ERR! node_modules/vite
npm ERR! dev vite#"^3.1.6" from the root project
npm ERR! peer vite#"^3.0.0" from #vitejs/plugin-vue#3.1.2
npm ERR! node_modules/#vitejs/plugin-vue
npm ERR! dev #vitejs/plugin-vue#"^3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite#"^2.9.9" from laravel-vite-plugin#0.2.4
npm ERR! node_modules/laravel-vite-plugin
npm ERR! dev laravel-vite-plugin#"^0.2.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: vite#2.9.15
npm ERR! node_modules/vite
npm ERR! peer vite#"^2.9.9" from laravel-vite-plugin#0.2.4
npm ERR! node_modules/laravel-vite-plugin
npm ERR! dev laravel-vite-plugin#"^0.2.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Warren Arnold\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Warren Arnold\AppData\Local\npm-cache\_logs\2022-10-06T19_47_43_871Z-debug-0.log
The following forms my vite.config:
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
the following is my package.json
{
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"test": "jest",
"jest": "jest --coverage"
},
"devDependencies": {
"#babel/preset-typescript": "^7.18.6",
"#inertiajs/inertia": "^0.11.0",
"#inertiajs/inertia-vue3": "^0.6.0",
"#inertiajs/progress": "^0.2.7",
"#tailwindcss/forms": "^0.5.2",
"#tailwindcss/typography": "^0.5.0",
"#types/express-list-endpoints": "^6.0.0",
"#types/jest": "^29.0.0",
"#vitejs/plugin-vue": "^3.0.0",
"alpinejs": "^3.0.6",
"autoprefixer": "^10.4.7",
"axios": "^0.25",
"date-fns": "^2.28.0",
"express": "^4.18.1",
"laravel-vite-plugin": "^0.2.1",
"lodash": "^4.17.19",
"postcss": "^8.4.14",
"save-dev": "^0.0.1-security",
"tailwindcss": "^3.1.0",
"ts-jest": "^28.0.8",
"ts-node": "^10.9.1",
"typescript": "^4.7.4",
"vite": "^3.1.6",
"vue": "^3.2.31"
},
"dependencies": {
"#babel/preset-env": "^7.18.10",
"#types/express": "^4.17.13",
"#types/morgan": "^1.9.3",
"#types/node-fetch": "^2.6.2",
"babel-jest": "^28.1.3",
"caller-id": "^0.1.0",
"dotenv": "^16.0.2",
"express-list-endpoints": "^6.0.0",
"jest": "^28.1.3",
"morgan": "^1.10.0",
"node-fetch": "^2.6.7",
"nodemon": "^2.0.19",
"nyc": "^15.1.0",
"pg": "^8.8.0",
"sequelize": "^6.21.4"
}
}
I am on node 16.17, laravel 9.19.
The error seems to stem from fact that laravel uses vite 2 while current vite is 3 and yet seems jetstream just installs latest dependencies without considering such. Hence you have to manually try out versions that play well with each other. Currently what worked for me is:
"#vitejs/plugin-vue": "^2.3.3",
"laravel-vite-plugin": "^0.2.1",
"vite": "^2.9.11",
"vue": "^3.2.31"
"tailwindcss": "^3.1.0",
it seems the laravel-vite-plugin are laravel-vite-plugin dependencies are the most conflicting.
To make the changes you can edit the package.json and run npm install or npm install the specific packages specifying the version get installation the link from npm for correct format.
This held me down for quite some hours. Thing is not even about node as above answer as myself was on 16.17, though check on that too, upgrading node ended up in up in more problems about openssl because i had postgres installed too which adds the config in path. I did not want to touch that. After fidgeting around creating separate project and installing breeze separately i caught the error.
I got a hint of whats going on from this tweet from Povilas of Laravel daily after hours of scouring the internet.
This question is similar to mine if am not wrong:
check it out

Vuex can not install using npm and it give an error

When I try to install Vuex using NPM commands, it gives this error.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined#undefined
npm ERR! Found: vue#2.6.14
npm ERR! node_modules/vue
npm ERR! dev vue#"^2.6.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^3.0.2" from vuex#4.0.2
npm ERR! node_modules/vuex
npm ERR! vuex#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/viraj/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/viraj/.npm/_logs/2022-06-23T16_10_55_210Z-debug-0.log
I tried using npm install vuex --save and npm install vuex#next --save as well. But both of them not work for me. Why is this happen? And I will be really appreciate if anyone can give some solution for this.
Note : I'm using Vue js with my Laravel project. Here is my package.json file for further refrence.
{
"private": true,
"scripts": {
"dev": "npm run development -- --watch",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production",
"lint": "eslint resources/js"
},
"devDependencies": {
"#popperjs/core": "^2.10.2",
"axios": "^0.21.4",
"bootstrap": "^5.1.3",
"deepmerge": "^4.2.2",
"eslint": "^8.16.0",
"eslint-plugin-vue": "^9.1.0",
"laravel-mix": "^6.0.44",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.13",
"sass-loader": "^11.1.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue-feather-icons": "^5.1.0",
"vuetify": "^2.6.6"
}
}
You have vue2 so you need vuex3 not 4
npm install vuex#3.4.0 --save

How to resolve sh: react-scripts: command not found?

I used create-react-app to generate an app.
create-react-app myapp
When I run yarn start or npm start I get this error:
react-scripts start
sh: react-scripts: command not found npm ERR! file sh npm ERR! code
ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR!
myapp#0.1.0 start: react-scripts start npm ERR! spawn ENOENT npm
ERR! npm ERR! Failed at the myapp#0.1.0 start script. npm ERR! This
is probably not a problem with npm. There is likely additional logging
output above.
When I run npm ls react:
myapp#0.1.0 /Users/johnno/foosball
└── react#16.2.0
react-scripts is present.
This is my package.json:
{
"name": "myapp",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"yarn": "^1.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
I tried the suggestions from this but to no avail. How can I fix this issue?
i solved this by deleting
node_modules
yarn.lock
manifest_lock.json
and installed packages by
npm install
or
yarn
Following steps worked for me
delete node_modules folder
delete yarn.lock if you are using yarn command or delete package-lock.json if you are using npm command
run yarn install (for yarn command) or npm install (for npm command)

angular 2 app in docker container failing. Failed to exec start script.

I have a compose file with an angular service, an express service, and a mongo database service. When I run docker-compose up --build, I get the following error:
> angular-client#0.0.0 start /usr/src/app/angular
> ng serve --host 0.0.0.0.0 --port 4200
2017-06-27T05:25:03.712327811Z
sh: 1: ng: not found
2017-06-27T05:25:03.732751350Z
npm info lifecycle angular-client#0.0.0~start: Failed to exec start
script
npm ERR! Linux 4.4.66-boot2docker
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v7.10.0
npm ERR! npm v4.2.0
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! angular-client#0.0.0 start: `ng serve --host 0.0.0.0.0 --port 4200`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the angular-client#0.0.0 start script 'ng serve --host 0.0.0.0.0 --port 4200'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-client package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ng serve --host 0.0.0.0.0 --port 4200
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-client
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-client
npm ERR! There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
2017-06-27T05:25:03.806272456Z
npm ERR! Please include the following file with any support request:
npm ERR! /root/.npm/_logs/2017-06-27T05_25_03_786Z-debug.log
This docker image was initially created on Ubuntu, where it works fine. This problem on started occurring when I pulled from github/dockerhub and ran docker-compose from Windows.
Here is my DOCKERFILE:
# Create image based on official Ubuntu 16.10 image
FROM ubuntu:16.10
# Create image based on the official Node 7 image from dockerhub
FROM node:7
# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app/angular
# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app/angular
# Copy dependency definitions
COPY package.json /usr/src/app/angular
# Install dependecies
RUN npm install
# Get all the code needed to run the app
COPY . /usr/src/app/angular
# Expose the port the app runs in
EXPOSE 4200
# Serve the app
CMD ["npm", "start"]
Here is my package.json:
"name": "angular-client",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0.0 --port 4200",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "4.1.3",
"#angular/compiler": "*",
"#angular/core": "^4.1.3",
"#angular/forms": "^4.1.3",
"#angular/http": "*",
"#angular/platform-browser": "^4.1.3",
"#angular/platform-browser-dynamic": "^4.1.3",
"#angular/router": "*",
"angular2-auth": "*",
"angular2-flash-messages": "^1.0.5",
"angular2-froala-wysiwyg": "^2.6.0",
"angular2-jwt": "^0.2.0",
"core-js": "^2.4.1",
"ng2-datepicker": "^1.8.3",
"ng2-pagination": "^2.0.1",
"ngx-dropdown": "0.0.22",
"rxjs": "^5.0.1",
"ts-helpers": "^1.1.1",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.0.0",
"#angular/compiler-cli": "^4.1.3",
"#angular/core": "^4.1.3",
"#types/jasmine": "2.5.51",
"#types/node": "^7.0.29",
"codelyzer": "~3.0.1",
"jasmine-core": "2.6.3",
"jasmine-spec-reporter": "4.1.0",
"karma": "1.7.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "~5.1.2",
"ts-node": "3.0.6",
"tslint": "^5.4.3",
"typescript": "~2.3.4"
}
}
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
==> Looks like you lost the node_modules folder between the npm build and the npm start but I cannot find why.
Try to build only to each step (by commenting all the instructions after) and find when it's lost by running a container on the result of the build (docker run -it --rm <ID_OF_BUILT_IMAGE> bash
BTW:
your first FROM is useless
it would be better to use ENTRYPOINT instead of CMD
you have too much 0 in the host parameter of ng serve (0.0.0.0.0 is not a valid IP)

How to get Mern Stack to work on Heroku

I'm testing out the Mern Stack (Mongo Express React/Redux Node) and set it up with development with no issue. Now I'm trying to deploy to Heroku. I did a git push heroku master just like normal, but when I check out the website I see Heroku's Application Error. I added a MongoDB through Heroku, and changed my heroku config variables, so it uses that db (I think I did this correctly). So I check into logs:
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! mern-starter#1.0.0 start: `cross-env NODE_ENV=development nodemon index.js`
npm ERR! spawn ENOENT
A little way down:
> mern-starter#1.0.0 start /app
> cross-env NODE_ENV=development nodemon index.js
sh: 1: cross-env: not found
Further down:
npm ERR! Linux 3.13.0-79-generic
npm ERR! argv "/app/.heroku/node/bin/node" "/app/.heroku/node/bin/npm" "start"
npm ERR! node v5.10.0
npm ERR! npm v3.8.3
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! mern-starter#1.0.0 start: `cross-env NODE_ENV=development nodemon index.js`
npm ERR! syscall spawn
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the mern-starter#1.0.0 start script 'cross-env NODE_ENV=development nodemon index.js'.
So I don't know as much about the back end, but it appears to be running the development script in package.json:
"scripts": {
"test": "mocha shared/tests/*.spec.js --compilers js:babel-register",
"test:server": "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test mocha --compilers js:babel-register --recursive server/tests/**/*.spec.js",
"start": "cross-env NODE_ENV=development nodemon index.js",
"start:prod": "cross-env NODE_ENV=production node index.js",
"bs": "npm run clean && npm run build && npm run start:prod",
"minify": "cleancss -o static/css/app.min.css static/css/app.css",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js && npm run minify",
"clean": "rimraf static/dist",
"slate": "rimraf node_modules && npm install",
"lint": "eslint client server shared"
}
So how can I get this to work?
EDIT:
"devDependencies": {
"babel-eslint": "^5.0.0-beta6",
"babel-loader": "^6.2.1",
"babel-plugin-react-transform": "^2.0.0",
"babel-plugin-transform-react-constant-elements": "6.5.0",
"babel-plugin-transform-react-inline-elements": "6.6.5",
"babel-plugin-transform-react-remove-prop-types": "0.2.4",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-react-hmre": "^1.1.0",
"babel-register": "^6.7.2",
"chai": "^3.5.0",
"clean-css": "^3.4.9",
"cross-env": "^1.0.7",
"css-loader": "^0.23.1",
"css-modules-require-hook": "^2.1.0",
"deep-freeze": "0.0.1",
"eslint": "^1.10.3",
"eslint-config-airbnb": "^4.0.0",
"eslint-plugin-react": "^3.16.1",
"expect": "^1.13.4",
"expect-jsx": "^2.2.2",
"extract-text-webpack-plugin": "^1.0.1",
"mocha": "^2.4.5",
"nodemon": "^1.9.1",
"pre-commit": "^1.1.2",
"react-addons-test-utils": "^0.14.7",
"react-transform-hmr": "^1.0.1",
"redux-devtools": "^3.1.1",
"redux-devtools-dock-monitor": "^1.1.0",
"redux-devtools-log-monitor": "^1.0.4",
"rimraf": "^2.5.1",
"style-loader": "^0.13.0",
"supertest": "^1.1.0",
"webpack": "^1.12.12",
"webpack-dev-middleware": "^1.5.1",
"webpack-hot-middleware": "^2.6.4"
},
I wrote about it here: https://hashnode.com/post/deploying-mern-to-heroku-success-cio7sc1py013nis531rg3lfmz
The reason is because herokou does not know about your devDependencies tree, only your regular dependencies get pushed.
A quick fix is to copy all of your devDependencies to your dependencies
You will also have to remove the following from the .gitignore file:
public/*
static/dist
static/css/app.min.css
There are a couple other steps I outlined in the article, but those are the primary reasons it won't work without some extra configurations.

Resources