Husky pre-commit doesn't fire in create-react app

Question

I installed husky to automatically format my code as CRA docs say. When I try to commit files, pre-commit actions just don't fire and non-formatted files are committed. What can I do with that?

I didn't do anything connected with Prettier or Husky that is not written in CRA docs: only installed prettier, husky, and lint-staged and added some code in package.json. Also I saw some similar questions there, but the answers are mostly connected with Node and Git versions and it's not my case.

Node version: v14.17.5
Git version: 2.32.0.windows.2

package.json:

{
  "name": "ts-react-course",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.19",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "axios": "^0.24.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.1.7",
    "prettier": "^2.5.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "types": "^0.1.1",
    "typescript": "^4.5.4",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "husky install"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

Husky's API has dropped conventional JS configuration support and create-react-app's documentation is outdated as it shows the old way of configuring it. When you installed Husky with npm install husky you installed the latest Husky version and not the old version.

Proposed solution

npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

Here's the associated GitHub issue in create-react-app repository in case you like to stay up-to-date with the fix: https://github.com/facebook/create-react-app/issues/11568