Cannot install commit-msg-linter with pnpm: sh: .git/hooks/commit-msg: No such file or directory - githooks

Description
I can't install commit-msg-linter, all other hooks work fine.
Reproduce
git init
pnpm init
pnpm add -D husky
pnpm add -D git-commit-msg-linter
pnpm exec husky install
git add .
git commit -m "hello"
Result
sh: .git/hooks/commit-msg: No such file or directory
husky - commit-msg hook exited with code 127 (error)
husky - command not found in PATH=/home/zau/.asdf/shims:/home/zau/.asdf/bin:/usr/lib/git-core:/home/zau/.local/share/pnpm:/opt/sonar-scanner/bin:/home/zau/.gem/ruby/3.0.0/bin:/home/zau/.yarn/bin:/home/zau/.config/yarn/global/node_modules/.bin:/home/zau/.pyenv/shims:/home/zau/.pyenv/bin:/usr/share/pyenv/plugins/pyenv-virtualenv/shims:/home/zau/bin:/usr/local/bin:/home/zau/.npm-global/bin:/home/zau/.pyenv/bin:/opt/sonar-scanner/bin:/home/zau/.nix-profile/bin:/nix/var/nix/profiles/default/bin:/home/zau/.nix-profile/bin:/nix/var/nix/profiles/default/bin:/usr/local/bin:/usr/bin:/var/lib/snapd/snap/bin:/usr/local/sbin:/var/lib/flatpak/exports/bin:/usr/lib/jvm/default/bin:/usr/bin/site_perl:/usr/bin/vendor_perl:/usr/bin/core_perl:/home/zau/.local/bin:/home/zau/.local/share/gem/ruby/3.0.0/bin
Specs
Using asdf*
git: 2.39.1
pnpm: 7.26.3
node: 19.6.0
package.json
{
"name": "husky-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"git-commit-msg-linter": "^4.5.0",
"husky": "^8.0.3"
}
}
Trying
remove node_modules
remove .git/hooks
Expect is:
git commit -m "hello"
************* Invalid Git Commit Message **************
commit message: hello
Invalid length: Length 5. Commit message cannot be longer than 100 characters or shorter than 10 characters
correct format: <type>[scope]: <subject>
example: docs: update README to add developer tips
type:
feat A new feature.
fix A bug fix.
docs Documentation only changes.
style Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
refactor A code change that neither fixes a bug nor adds a feature.
test Adding missing tests or correcting existing ones.
chore Changes to the build process or auxiliary tools and libraries such as documentation generation.
perf A code change that improves performance.
ci Changes to your CI configuration files and scripts.
build Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm).
temp Temporary commit that won't be included in your CHANGELOG.
scope:
Optional, can be anything specifying the scope of the commit change.
For example $location, $browser, $compile, $rootScope, ngHref, ngClick, ngView, etc.
In App Development, scope can be a page, a module or a component.
subject:
Brief summary of the change in present tense. Not capitalized. No period at the end.
husky - commit-msg hook exited with code 1 (error)

Ironically, I solved it exactly after posting here, thanks community
If you updated the pnpm version with asdf just run:
pnpm store prune
rm -rf node_modules
pnpm i
pnpm exec husk install
and run:
git commit -m "hello"
************* Invalid Git Commit Message **************
commit message: hello
Invalid length: Length 5. Commit message cannot be longer than 100 characters or shorter than 10 characters
correct format: <type>[scope]: <subject>
example: docs: update README to add developer tips
type:
feat A new feature.
fix A bug fix.
docs Documentation only changes.
style Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).
refactor A code change that neither fixes a bug nor adds a feature.
test Adding missing tests or correcting existing ones.
chore Changes to the build process or auxiliary tools and libraries such as documentation generation.
perf A code change that improves performance.
ci Changes to your CI configuration files and scripts.
build Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm).
temp Temporary commit that won't be included in your CHANGELOG.
scope:
Optional, can be anything specifying the scope of the commit change.
For example $location, $browser, $compile, $rootScope, ngHref, ngClick, ngView, etc.
In App Development, scope can be a page, a module or a component.
subject:
Brief summary of the change in present tense. Not capitalized. No period at the end.
husky - commit-msg hook exited with code 1 (error)

Related

NexJS Tailwind not loading styles after cloning a github repository

So I'm following a React NextJS tutorial and everything was fine yesterday, but today I had trouble accessing Sanity backend. After Googling the solution was to comment out tailwindcss: {}, in postcss.config.js.
But then all the styles in the app stopped working, even if I un-commented tailwindcss: {},
Remembering that everything worked last time I pushed to GitHub yesterday I cloned the repo but the issue persists.
Then I started the tutorial from scratch, and both Tailwind and Sanity were working perfectly and they still are. But I was trying to figure out what stops my original app from working.
Been bashing my head for hours now and still can't come up with a solution. I even pushed the now working app, cloned it again, and the clone doesn't work while the original of the clone still works.
I ran both npm i --legacy-peer-deps and Tailwinds installation
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
The npx command told me that tailwind.config.js and postcss.config.js already exist.
So I tried cloning the repo, deleting tailwind.config.js, postcss.config,js, and package-lock.json. Also ran uninstall command for Tailwind. And then again ran npm i and Tailwinds installation. But it still doesn't work.
Here's the repo - https://github.com/RUSHWAYC/tikdok-test.git
Here's how it looks like:
Here's how it should look like:
Am I missing anything? Any commands that I should be running in the terminal?
Any help would be appreciated.
Steps you can follow to fix this issue:
Uncomment tailwindcss: {} from postcss.config.js, then re-run your development server.
Completely remove everything, start from scratch, then only copy/import files you need from the started repository.
After hours of fewer induced hallucinations I figured it out.
So I found a way on how to fix the Tailwind styles not applying.
Clone the last push to GitHub
Delete tailwind.config.js | postcss.config.js | package.json | package-lock.json
Remake tailwind files and package.json (or in my case copy them from the dude whose project I'm copying)
npm i --legacy-peer-deps
cd backend (to go to Sanity backend folder)
npm i --legacy-peer-deps
cd ..
Don't forget to comment out tailwindcss: {}, in postcss.config.js as it messes up Sanity
npm run dev
So it works now and shows Tailwind CSS applied to the project.
But then, if you git add . there are these errors:
warning: in the working copy of 'package.json', CRLF will be replaced by LF the next time Git touches it
warning: in the working copy of 'postcss.config.js', CRLF will be replaced by LF the next time Git touches it
warning: in the working copy of 'tailwind.config.js', CRLF will be replaced by LF the next time Git touches it
So git reset that.
Found this useful post about the first error. - Git replacing LF with CRLF
Basically, it's something dumb that I'm even dumber to understand.
But at the end of the post, they linked this answered question here about git add --renormalize . that fixes the issue - Git: how to renormalize line endings in all files in all revisions?
So after doing all the steps above and writing some code, one should run:
git add --renormalize . and then git commit -m "Message."
There should be no errors like previously this time, and every time you git commit next there shouldn't be any issues (unless you edit the files in question).
I also changed the config autocrlf settings to input from true after reading the first article I linked. Not sure if I should, but I did and the article I followed on how to do it can be found here - How to change line-ending settings

Fix for vulnerability - "Critical Prototype Pollution in immer" Patched >=9.0.6

Here's a fix for the following vulnerability:
Critical Prototype Pollution in immer
Package immer
Patched in >=9.0.6
Dependency of react-scripts
Path react-scripts > react-dev-utils > immer
More info https://github.com/advisories/GHSA-33f9-j839-rf8h
Fix:
Install the patched version of immer, in this case 9.0.6, using the following command:
npm install --save immer#9.0.6
Update the package.json file with npm update.
IMPORTANT NOTE: if at this point the vulnerability is still present, you can do the following ONLY if you know this will not break your code or mess up dependencies for previous versions or other packages of your project. I'm the only person working on my project, so this fix works in my scenario.
In your package-lock.json file, find the outdated package, in my case:
"immer": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/immer/-/immer-8.0.1.tgz",
"integrity": "sha512-aqXhGP7//Gui2+UrHtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaH9RZ1j1xlIYqaaaipBoqcqeibkc17PNvF=="
},
and straight-up delete it.
This fix seems not very sustainable for all packages/dependencies, but who knows? If there are better ways, let the community know.
Your fix should be good enough to patch that critical vulnerability, though as you've identified it tends to be fragile and easy to undo.
If possible, update to react-scripts#^5.0.0 or later. It has already upgraded transitively via react-dev-utils to immer#^9.0.7.
If for whatever reason (e.g. removed polyfills or otherwise) you cannot upgrade react-scripts, I'd suggest after reviewing immer's breaking changes:
npm-force-resolutions, add the following to package.json, then npm install:
"resolutions": {
"immer": "9.0.12"
},
"scripts": {
"preinstall": "npx npm-force-resolutions"
},
OR yarn resolutions add the following to package.json, then yarn install:
"resolutions": {
"immer": "9.0.12"
},
Of course, if someone else finds another vulnerability in immer in future, you'll need to repeat this with a later version.
P.S. Sorry for answering what I'm sure is a duplicate question, though no obvious one to link to jumps out at me right now.

How to analyze Next Js bundle size and content

I've just upgrated to Next JS 9.0 and when I run a build there's a fantastic new feature which shows you the size of all the compiled pages. They're all around 20-30k except for pages which use Formik which tend to be at least double that size. The main problem is that the app.js file is over 600k and red.
Is there a way to dive further and see on a more granular level what's making up all my bundles?
Install #next/bundle-analyzer and cross-env as dev dependency:
yarn add -D #next/bundle-analyzer cross-env
Create a next.config.js file in the root of your project directory (next to package.json) and paste the code below:
const withBundleAnalyzer = require('#next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withBundleAnalyzer({
reactStrictMode: true,
})
Go to your package.json file and add the line below to the scripts section:
"analyze": "cross-env ANALYZE=true next build"
Now you can run yarn analyze or npm run analyze to analyze your bundle size.
You can use below package to analyze main bundle:
https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer

What exactly is the 'react-scripts start' command?

I've been working with a React project using create-react-app and I have two options to start the project:
First way:
npm run start with the definition at the package.json like this:
"start": "react-scripts start",
Second way:
npm start
What is the difference between these two commands? And, what is the purpose of the react-scripts start?
I tried to find the definition, but I just found a package with this name. I still don't know what is the use of this command?
create-react-app and react-scripts
react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.
react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.
with create-react-app you have following features out of the box.
React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
A fast interactive unit test runner with built-in support for coverage reporting.
A live development server that warns about common mistakes.
A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
Hassle-free updates for the above tools with a single dependency.
npm scripts
npm start is a shortcut for npm run start.
npm run is used to run scripts that you define in the scripts object of your package.json
if there is no start key in the scripts object, it will default to node server.js
Sometimes you want to do more than the react scripts gives you, in this case you can do react-scripts eject. This will transform your project from a "managed" state into a not managed state, where you have full control over dependencies, build scripts and other configurations.
As Sagiv b.g. pointed out, the npm start command is a shortcut for npm run start. I just wanted to add a real-life example to clarify it a bit more.
The setup below comes from the create-react-app github repo. The package.json defines a bunch of scripts which define the actual flow.
"scripts": {
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"start-js": "react-scripts start"
},
For clarity, I added a diagram.
The blue boxes are references to scripts, all of which you could executed directly with an npm run <script-name> command. But as you can see, actually there are only 2 practical flows:
npm run start
npm run build
The grey boxes are commands which can be executed from the command line.
So, for instance, if you run npm start (or npm run start) that actually translate to the npm-run-all -p watch-css start-js command, which is executed from the commandline.
In my case, I have this special npm-run-all command, which is a popular plugin that searches for scripts that start with "build:", and executes all of those. I actually don't have any that match that pattern. But it can also be used to run multiple commands in parallel, which it does here, using the -p <command1> <command2> switch. So, here it executes 2 scripts, i.e. watch-css and start-js. (Those last mentioned scripts are watchers which monitor file changes, and will only finish when killed.)
The watch-css makes sure that the *.scss files are translated to *.cssfiles, and looks for future updates.
The start-js points to the react-scripts start which hosts the website in a development mode.
In conclusion, the npm start command is configurable. If you want to know what it does, then you have to check the package.json file. (and you may want to make a little diagram when things get complicated).
succinctly - it runs this
node node_modules/react-scripts/bin/react-scripts.js start
"start" is a name of a script, in npm you run scripts like this npm run scriptName, npm start is also a short for npm run start
As for "react-scripts" this is a script related specifically to create-react-app
npm start is the short form for npm run start
You can check about it here Difference between npm start and npm run start
react-scripts start
react-scripts is a set of scripts to support the creation, development and testing of react applications. It is used by create-react-app.
create-react-app is the officially supported way to create single-page React applications. create react app uses webpack to parse and bundle the application.
webpack parses the application and creates a dependency graph from its entry point specified in the webpack config file. while parsing, webpack uses babel to transpile the application to JavaScript, which has better support across browsers.
Webpack uses the generated dependency graph to create a single JavaScript file consisting of the application source code and modules used by the app, injects the file via script tag into public/index.html, and starts a development server on http://localhost:3000. Navigating to this URL in the browser will show a live, interactive instance of your application. Any changes saved to the source code will reflect in the running app instance automatically.
You can read more about this topic more on here

Newbie to Selenium E2E with React

I created a boilerplate React project, packages.json has the usual suspects:
prestart
start
list
test
etc.
I am using Selenium for my E2E framework. I have the following test:
it('should launch a browser', () => {
const By = webDriver.By;
let driver = new webDriver.Builder()
.forBrowser('chrome')
.build();
// verify Continue button exist on page
driver.navigate().to('http://localhost:3000').then(() => driver.findElement(By.id('submitButton')).getAttribute('value'))
.then(buttonValue => expect(buttonValue).toEqual('Continue'));
});
If I do npm start, my site launches and my E2E launches an additional Chrome browser and navigate to my running site: localhost:3000. The test succeeds.
My question is, how do I run my E2E separately, without the need to my site side by side using npm start.
I am newbie to React and Selenium, in case I am missing a lot of information on this post, I apologize in advance.
Well, since you didn't find the time to update the question information with the NPM "scripts" object, then I'll try to give it a shot in the dark.
First of all, due to your wording, I can interpret your question two ways:
a.) you want to run your E2E tests separately, w/o your server running (which is started via npm start);
b.) you want to run your E2E tests via npm start, without triggering your server from starting;
a.) If you want to run your scripts separately, seeing as you are using Mocha, then you can trigger them via: ./node_modules/.bin/mocha <pathToTests>/<testFile>.
Now, since you stated in your question that you're using npm test script, then that should be the best switch to bind your E2E tests execution to:
package.json (Scripts object):
"scripts": {
"test": "mocha --reporter spec <pathToTests>/<testFile>",
"start": "node <yourServerName>.js"
},
Please note that mocha <pathToTests>/<testFile> is equivalent to ./node_modules/.bin/mocha <pathToTests>/<testFile>, because NPM looks for binaries inside node_modules/.bin and when Mocha was installed, it installed it into this directory.
Note: Many packages have a bin, or .bin section, declaring scripts that can be called from NPM similar to Mocha. If you want to find out what other binaries you can run that way, just issue a ls node_modules/.bin.
b.) In this care, I think your issue might be due to NPM defaulting some script values based on package contents. Specifically, if you have a server.js file in the root of your package, then npm will default the start command to server.js.
So if you're starting your E2E tests via npm start, having this ("start": "mocha <pathToTests>/<testFile>") in your package.json and there is a server.js file in the root of your package, then npm will default the start command to node server.js.
In which case, you could either move your server script to another place in the project, or change the switch you're using to trigger the E2E tests (see section b.)).
Hope this solves your problem and if not, looking forward for that package.json "scripts" object so we can really see what's up. :)
Cheers!

Resources