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

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)

Related

npm run dev error after bootstrap installation

Following a tutorial on vue and laravel, I managed to make a start.
Everything was all right, I even implemented my first vue-component, untill I tried to install bootstrap.
Now I get the following errors after
npm run dev
Can anyone point me in the right direction to solve this?
I tried many solutions I found online, removing the node_modules folder, clean install, update, etc.
I am afraid I messed up without really knowing where to start to figure out the problem.
This is the error:
> dev
> npm run development
> # development D:\laravel\ijsbreker_memory
> mix
× Mix
Compiled with some errors in 5.26s
ERROR in ./resources/js/components/Cards.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div>
| <h2 > Cards </h2>
webpack compiled with 1 error
npm ERR! Windows_NT 10.0.19043
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "D:\\laravel\\ijsbreker_memory\\node_modules\\npm\\bin\\npm-cli.js" "run" "development"
npm ERR! node v14.16.0
npm ERR! npm v2.15.12
npm ERR! code ELIFECYCLE
npm ERR! # development: `mix`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the # development script 'mix'.
npm ERR! This is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! mix
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! D:laravel\ijsbreker_memory\npm-debug.log
npm ERR! code 1
npm ERR! path D:\laravel\ijsbreker_memory
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c npm run development
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Local\npm-cache\_logs\2021-08-09T15_42_13_853Z-debug.log
The commands I gave before the trouble started were from a tutorial:
=============================================================================
Step 2 : Install Laravel/UI
Laravel UI is an official library that comes with predefined UI components.
To install Laravel/UI run the command:
composer require laravel/ui
Step 3 : Install Bootstrap 5 in Laravel
In this step please follow up with me the commands on the same order and don't skip any of the commands listed bellow .
php artisan ui bootstrap
You may noticed that this command will install Bootstrap 4, the reason you have to run it is that it will set up a lot of things for you so you don't have to do it yourself compared of installing bootstrap 5 directly.
Now we will switch the Bootstrap version to Bootstrap 5 using this commands.
Note that you should run both this commands on the same order so you wont get any issues.
npm install bootstrap#next #popperjs/core --save-dev
npm install bootstrap #popperjs/core --save-dev
next, you only have to:
npm install
npm run dev
If you followed up with me you will have Bootstrap 5 installed on your Laravel project successfully. you can check wish Bootstrap version is installed on your project on package.json file.
====================================================================================
My package.json file:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"#popperjs/core": "^2.9.3",
"axios": "^0.21",
"bootstrap": "^5.1.0",
"jquery": "^3.6",
"laravel-mix": "^6.0.27",
"lodash": "^4.17.19",
"popper.js": "^1.16.1",
"postcss": "^8.1.14",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.11",
"sass-loader": "^11.0.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"latest": "^0.2.0"
}
}
Which version of node.js are do you using?, probably you need upgrade your version of node, i'm using nodejs version 16.6.1 https://nodejs.org/en/download/current/ (latest).
I had before similar issues with old versions of nodejs.

del -rf ../public/{js,css,img} && vue-cli-service build --no-clean | Parameter format not correct - "public"

I am using vue in laravel. npm run watch is working fine to me, But when I am creating a build out of it, it throwing me the following error.
> frontend#0.1.0 build C:\wamp64\www\laravel-vue\laravel-vue-cli-3\frontend
> del -rf ../public/{js,css,img} && vue-cli-service build --no-clean
Parameter format not correct - "public".
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend#0.1.0 build: `del -rf ../public/{js,css,img} && vue-cli-service build --no-clean`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\***\AppData\Roaming\npm-cache\_logs\2020-12-18T12_40_47_194Z-debug.log
This is my package.json file
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "del -rf ../public/{js,css,img} && vue-cli-service build --no-clean",
"lint": "vue-cli-service lint"
},
}

Error while trying to run npm run build

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

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)

Heroku Build Failing Bower Error

Please Help me out I am new to everything regarding heroku and bower assume I understand very Little Here is the heroku log.
Everything with this was working until yesterday and all of a sudden minor changes won't deploy properly
bower moment#>= 2.6.0 resolved git://github.com/moment/moment.git#2.10.6
bower angular resolution Unsuitable resolution declared for angular: 1.4.4
bower ECONFLICT Unable to find suitable version for angular
npm ERR! Linux 3.13.0-57-generic
npm ERR! argv "/tmp/build_1c565364c27a4cdb7538ade6aae8f158//node-v0.12.4-linux-x64/bin/node" "/tmp/build_1c565364c27a4cdb7538ade6aae8f158/node-v0.12.4-linux-x64/bin/npm" "install"
npm ERR! node v0.12.4
npm ERR! npm v2.10.1
npm ERR! code ELIFECYCLE
npm ERR! fronted#1.0.0 postinstall: `./node_modules/bower/bin/bower install;`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fronted#1.0.0 postinstall script './node_modules/bower/bin/bower install;'.
npm ERR! This is most likely a problem with the fronted package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ./node_modules/bower/bin/bower install;
npm ERR! You can get their info via:
npm ERR! npm owner ls fronted
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
! Push rejected, failed to compile nginx-buildpack app
Here is the bower.json
{
"name": "ac",
"version": "0.0.0",
"dependencies": {
"angular": "~1.4.0",
"bootstrap": "~3.3.5",
"angular-resource": "~1.4.0",
"angular-ui-router": "~0.2.15",
"angular-bootstrap": "~0.13.0",
"spin": "~1.1.6",
"angular-spinner": "~0.6.2",
"moment-timezone": "~0.4.0",
"angular-ui-select": "~0.12.0",
"angular-sanitize": "~1.4.2",
"intl-tel-input": "~6.0.4",
"international-phone-number": "~0.0.8",
"angular-cookies": "~1.4.3",
"angular-ui-notification": "~0.0.11",
"angular-loading-bar": "~0.8.0",
"angular-sweetalert": "~1.1.0"
},
"resolutions": {
"angular": "~1.4.0"
},
"devDependencies": {
"angular-mocks": "~1.4.0"
},
"appPath": "app",
"moduleName": "frontApp",
"resolutions": {
"intl-tel-input": "~6.0.4",
"angular": "1.4.4"
}
}
I had this same issue after installing moment via bower
Adding resolutions to your bower.json seems to solve it.
Example
//dependencies
},
"resolutions": {
"angular": "1.5.0",
"moment": "2.12.0"
}

Resources