pre commit rules failing when used with lint-staged - githooks

I am trying to set the pre commit git hooks for angular5 project. I am using husky with lint-staged. Prettier and stylelint linters run fine. But when lint-staged encounters 'ng lint', it just throws error:
Project '/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/src/app/components/dashboard/dashboard.component.ts' could not befound in workspace.
Error: Project '/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/src/app/components/dashboard/dashboard.component.ts' couldnot be found in workspace.
at Workspace.getProject (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular-devkit/core/src/workspace/workspace.js:83:19)
at Architect.getBuilderConfiguration (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular-devkit/architect/src/architect.js:96:41)
at MergeMapSubscriber._loadWorkspaceAndArchitect.pipe.operators_1.concatMap [as project] (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular/cli/models/architect-command.js:64:55)
at MergeMapSubscriber._tryNext (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
at MergeMapSubscriber._next (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
at MergeMapSubscriber.Subscriber.next (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
at TapSubscriber._next (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular/cli/node_modules/rxjs/internal/operators/tap.js:65:26)
at TapSubscriber.Subscriber.next (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular/cli/node_modules/rxjs/internal/Subscriber.js:67:18)
at MergeMapSubscriber.notifyNext (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular/cli/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
at InnerSubscriber._next (/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/node_modules/#angular/cli/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! avi-portal-ui#0.0.0 lint: `ng lint "/Users/sneha.vantamuri/Documents/customerportal/aviportal-ui/src/app/components/dashboard/dashboard.component.ts"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the avi-portal-ui#0.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
here is my husky and lint-staged configuration in package.json
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{ts,scss,json}": [
"npm run prettier:check",
"npm run stylelint",
"npm run lint",
"git add"
]
}
also:
"scripts":{
"lint": "ng lint",
"prettier:check": "prettier --config ./.prettierrc --check './src/**/*.{ts,scss,json}'",
"stylelint": "stylelint \"src/**/*.scss\"",
}
"npm run prettier:check",
"npm run stylelint",
These 2 commands run properly but npm run lint has error

After spending few hours I figured out that, projectName was not getting passed properly. That is why Workspace.getProject() was giving the exception. Also came to know that, angular-cli > 5, needs projectname to be specified explicitly the ng lint command to make it work with lint-staged.
Sharing the solution for someone facing the same issue:
So here is the solution:
"*.{ts,scss,json}": [
"npm run prettier:check",
"npm run stylelint",
"npm run lint **<yourProjectNamefromAngular.jsonfile> --files**",
"git add"
]
}
For ref: https://github.com/okonet/lint-staged/pull/534/files

Related

How to run react on browser?

I am new to react framework and I am trying to make a web app with the help of Tailwind CSS. it runs on the browser when I followed these steps :
npx create-react-app my-project
cd my-project
npm install -D tailwindcss#npm:#tailwindcss/postcss7-compat postcss#^7 autoprefixer#^9
npm install #craco/craco
npx tailwindcss-cli#latest init
npm start
but when I reopen the editor and run the command npm start in the terminal, the following error shows:
PS D:\react1> npm start
npm ERR! Missing script: "start"
npm ERR!
npm ERR! Did you mean one of these?
npm ERR! npm star # Mark your favorite packages
npm ERR! npm stars # View packages marked as favorites
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\DELL\AppData\Local\npm-cache\_logs\2021-07-12T09_16_22_570Z-debug.log
Please help me where i am wrong. I followed this page for the installation of react with tailwind
https://tailwindcss.com/docs/guides/create-react-app
Try
npm i react-scripts
npm start
First do npm i react-scripts after that replace the current scripts with this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Then restart your visual studio code, and run in terminal: npm start
I got this error because I was not running the command npm start in a particular project directory.
Like my project was in: D://React/react1
and I was running the command in D://React

How to solve issue with React build

After making changes to the react application. I want to build the changes again and redeploy to IIS. but for a strange reason, the build is not working again. I have tried everything to rebuild but non has worked.
I tried
npm run build:prod
> project#0.1.0 build:prod C:\Users\MYNAME\source\repos\Project
> env-cmd -f .env.prod npm run build
npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\MYNAME\AppData\Roaming\npm-cache\_logs\2021-04-19T13_38_22_516Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! Project#0.1.0 build:prod: `env-cmd -f .env.prod npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the Project#0.1.0 build:prod 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:
Here is the script part of my package.json
"scripts": {
"start": "env-cmd -f .env.dev react-scripts start",
"build:prod": "env-cmd -f .env.prod npm run build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
In "build:prod": "env-cmd -f .env.prod npm run build" the npm run build is missing. You have only start, build:prod, test, eject scripts, and no build exists.

Erro run build nextjs CI False

I'm trying to build the nextjs, but this is with the error below. What can it be?I've run the npm run build and it still doesn't work
package.json
{
"name": "mobills-indica",
"version": "1.0.0",
"scripts": {
"install": "yarn build-all",
"next": "yarn build-firebase && cd \"src/app\" && yarn && yarn dev",
"preserve": "yarn build-all",
"serve": "firebase serve",
"predeploy": "yarn build-all",
"deploy": "firebase deploy",
"build-all": "yarn build-next && yarn build-firebase",
"build-next": "cd \"src/app\" && yarn && yarn build",
"build-firebase": "cd \"src/functions\" && yarn",
"dev": "next",
"build": "next build"
}
}
Error
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mobills-indica#1.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mobills-indica#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Mobills\AppData\Roaming\npm-cache\_logs\2020-06-02T13_10_36_339Z-debug.log
I might be very late to answer this question but this is what has worked for me and it might help someone to get back on the development track!
$ npm install -g npm#latest # or, npm install -g npm#latest --prefix "C:\Program Files\nodejs"
$ rm -rf node_modules # or, `cmd /c rmdir /s /q node_modules` on Windows
$ npm install
Happy Coding!!!

windows 10 error -> '.' is not recognized as an internal or external command

I am trying to run 'npm run build' in the terminal of parser written in React. But whenever I do this I get an error inline
> matrix#1.0.0 build E:\work\Parser\parser
> ./node_modules/webpack-cli/bin/cli.js --mode=development
'.' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! matrix#1.0.0 build: `./node_modules/webpack-cli/bin/cli.js --mode=development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the matrix#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\criti\AppData\Roaming\npm-cache\_logs\2019-12-18T08_21_16_082Z-debug.log
This happens only in windows.
When i searched for the
./node_modules/webpack-cli/bin/cli.js --mode=development
in package.json I found this to be written as
"build": "./node_modules/webpack-cli/bin/cli.js --mode=development",
"build:dev": "./node_modules/webpack-cli/bin/cli.js --mode=developement",
"build:prod": "./node_modules/webpack-cli/bin/cli.js --mode=production",
"build:watch": "./node_modules/webpack-cli/bin/cli.js --watch",
"build-server": "./node_modules/webpack-cli/bin/cli.js ./parser.js -o ./parser_server.bundle.js --target='node'",
What is this issue ?
You don't need to put ./node_modules/webpack-cli/bin/ on each command, simply put webpack --mode development.
Assuming you have npx installed, try this in the command line: npx webpack --mode=development

ReactJS web application Permission error when deploy rty to build

I'm stuck at deploying my reactJS web application to Heroku.
It worked fine on the local machine. I got problems with permission when Build section runs.
I don't know what did I wrong, everything else in this course works fine.
I tried to deploy the app with GitHub connection, but I got the same error.
I tried to run this code in terminal NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client, but I got another error (NPM... is not a command).
my package.json file :
{
"name": "contactkeeper",
"version": "1.0.0",
"description": "Contact manager app",
"main": "server.js",
"engines": {
"node": "^12.4.0"
},
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"keywords": [],
"author": "vinogitz",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"config": "^3.1.0",
"express": "^4.17.1",
"express-validator": "^6.1.1",
"jsonwebtoken": "^8.5.1",
"lodash.template": "^4.5.0",
"mongoose": "^5.6.3"
},
"devDependencies": {
"concurrently": "^4.1.1",
"nodemon": "^1.19.1"
}
}
my gitignore like this:
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
#client/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
-----> Build
Running heroku-postbuild
> contactkeeper#1.0.0 heroku-postbuild /tmp/build_5e4bd7bd79fb3c0f84bb21cb820d7594
> NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
audited 902208 packages in 13.316s
found 0 vulnerabilities
> client#0.1.0 build /tmp/build_5e4bd7bd79fb3c0f84bb21cb820d7594/client
> react-scripts build
sh: 1: react-scripts: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! client#0.1.0 build: `react-scripts build`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the client#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! /tmp/npmcache.BWDxV/_logs/2019-07-22T11_55_03_878Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! contactkeeper#1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the contactkeeper#1.0.0 heroku-postbuild 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! /tmp/npmcache.BWDxV/_logs/2019-07-22T11_55_03_893Z-debug.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
I found the problem. the permission denied is not the perfect error message, but i found the solution.
I tried to ignore the node_modules folder in my client folder with .gitignore, but I didn't find the solution first time, so I just delete the sub folder node_modules from project. After that, I tried to deploy it again, and it's worked. So the real problem was that, the git add, git commit, git push commands pushed the node_modules sub folder to the repository.
PS.: The solution is: write node_modules/ instead of /node_modules in gitignore. With this the node_modules folders in a project (root folder or in a sub folder get untracked.)
Thanks!

Resources