Related
I am newly(ish) responsible for a git repository. When I clone it and look in the .git/hooks directory, there are only sample hooks.
We use NPM as our package manager for the front end UI. After I run an "npm install", I 'all of a sudden' have real git hooks in .git/hooks. How does this work? What am I looking for?
I figure it is some kind of hook, but I am not sure where to start looking to track it down. In my package.json file I see tslint-react-hooks (TSLint rule that enforces the Rules of Hooks) and react-hook-form (Performant, flexible and extensible forms with easy-to-use validation.), but I think these are red herrings.
I've seen this question Putting Git hooks into a repository which talks about getting hooks in place, but I don't see how it happens for this project.
Here is a copy of my package.json file. Thanks for any insights.
{
"name": "ram",
"version": "1.0.0",
"description": "RAM UI Build Tools",
"scripts": {
"test": "jest --coverage --watchAll",
"testOnce": "jest",
"build": "cross-env NODE_ENV=production node ./Config/prod.js",
"build:dev": "cross-env NODE_ENV=development node ./Config/dev-noserver.js",
"dev": "cross-env NODE_ENV=development nodemon -e js,ts,tsx,json,scss ./Config/dev-noserver.js",
"start": "cross-env NODE_ENV=development node ./Config/dev.js",
"start:full": "webpack-dev-server --progress --config ./Config/dev-noserver-hot.js",
"precommit": "lint-staged"
},
"lint-staged": {
"*.{js,ts,tsx,json,scss}": [
"prettier --write",
"git add"
],
"*.scss": [
"stylelint --fix",
"git add"
],
"*.{ts,tsx}": [
"tslint --fix",
"git add"
]
},
"prettier": {
"singleQuote": true,
"tabWidth": 4,
"printWidth": 120
},
"jest": {
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testMatch": [
"**/?(*.)(spec|test).ts?(x)"
],
"modulePaths": [
"<rootDir>/Content"
],
"testPathIgnorePatterns": [
"/node_modules",
"./Config"
],
"collectCoverage": true,
"collectCoverageFrom": [
"**/*.*",
"!**/*.json",
"!**/index.ts"
],
"coveragePathIgnorePatterns": [
"/node_modules/",
"./Config",
"./coverage",
"./Types",
"__snapshots__",
"__tests__",
"index.tsx",
"./Content/Pages",
"./Content/Utils/constants.ts"
],
"coverageReporters": [
"html"
],
"setupFilesAfterEnv": [
"./Config/Test/testFramework.js"
],
"testURL": "http://localhost/"
},
"author": "xxxxxxxxxxxxx",
"license": "UNLICENSED",
"private": true,
"devDependencies": {
"#types/classnames": "2.2.3",
"#types/enzyme": "3.1.10",
"#types/history": "4.6.2",
"#types/jest": "22.2.3",
"#types/jquery": "3.3.1",
"#types/lodash": "4.14.110",
"#types/object-hash": "1.2.0",
"#types/query-string": "6.2.0",
"#types/react-beautiful-dnd": "12.1.2",
"#types/react-bootstrap": "0.32.21",
"#types/react-datepicker": "2.9.5",
"#types/react-dom": "18.0.0",
"#types/react-js-pagination": "3.0.3",
"#types/react-router": "4.0.23",
"#types/react-router-dom": "4.2.6",
"#types/react-test-renderer": "16.0.1",
"#types/react-toggle": "4.0.2",
"#types/styled-components": "5.1.25",
"#types/uuid": "3.4.3",
"#types/webpack-env": "1.13.6",
"#typescript-eslint/eslint-plugin": "5.35.1",
"#typescript-eslint/parser": "5.35.1",
"axios-mock-adapter": "1.15.0",
"cross-env": "5.1.4",
"css-hot-loader": "1.3.9",
"css-loader": "0.28.11",
"ejs-loader": "0.3.1",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.1.1",
"eslint": "8.22.0",
"eslint-config-standard-with-typescript": "22.0.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-n": "15.2.5",
"eslint-plugin-promise": "6.0.1",
"eslint-plugin-react": "7.31.0",
"html-webpack-plugin": "3.2.0",
"husky": "0.14.3",
"jest": "26.4.2",
"lint-staged": "13.0.3",
"mini-css-extract-plugin": "0.4.0",
"node-sass": "4.14.0",
"nodemon": "1.17.3",
"postcss-flexbugs-fixes": "3.3.0",
"postcss-loader": "2.1.4",
"prettier": "1.19.1",
"react-test-renderer": "18.2.0",
"sass-loader": "7.0.1",
"style-loader": "0.20.3",
"stylelint": "9.2.0",
"stylelint-config-recommended-scss": "3.2.0",
"stylelint-declaration-strict-value": "1.0.4",
"stylelint-declaration-use-variable": "1.6.1",
"stylelint-formatter-pretty": "1.0.3",
"stylelint-scss": "3.0.0",
"stylelint-webpack-plugin": "0.10.4",
"ts-jest": "26.3.0",
"ts-loader": "8.0.3",
"ts-react": "1.2.1",
"tsconfig-paths-webpack-plugin": "3.0.4",
"tslint": "6.1.3",
"tslint-config-prettier": "1.18.0",
"tslint-loader": "3.5.4",
"tslint-react": "5.0.0",
"tslint-react-hooks": "2.2.2",
"typescript": "4.6.4",
"webpack": "4.46.0",
"webpack-cli": "2.0.14",
"webpack-dev-server": "3.10.3",
"xml2js": "0.4.19"
},
"dependencies": {
"#hapi/cryptiles": "*",
"#types/react-table": "6.7.12",
"axios": "0.27.2",
"babel-loader": "8.2.5",
"bootstrap": "3.3.5",
"chokidar": "3.5.3",
"classnames": "2.2.5",
"core-js": "3.24.1",
"ejs": "3.1.8",
"eslint-config-airbnb": "19.0.4",
"eslint-config-airbnb-base": "15.0.0",
"eslint-config-react-app": "7.0.1",
"eslint-plugin-jsx-a11y": "6.6.1",
"eslint-utils": "3.0.0",
"eventsource": "2.0.2",
"expose-loader": "0.7.5",
"file-loader": "1.1.11",
"font-awesome": "4.7.0",
"highcharts": "10.1.0",
"highcharts-react-official": "3.0.0",
"history": "4.7.2",
"jquery": "2.1.1",
"json-schema": "0.4.0",
"lodash": "4.17.21",
"object-hash": "1.3.1",
"popper": "1.0.1",
"powerbi-client": "2.18.6",
"powerbi-client-react": "1.3.3",
"prop-types": "15.6.1",
"querystring": "0.2.0",
"react": "18.2.0",
"react-beautiful-dnd": "13.0.0",
"react-bootstrap": "0.33.1",
"react-datepicker": "4.8.0",
"react-dev-utils": "12.0.1",
"react-dom": "18.2.0",
"react-filtered-multiselect": "0.5.1",
"react-hook-form": "6.5.3",
"react-input-switch": "2.2.2",
"react-js-pagination": "3.0.3",
"react-promise": "2.0.3",
"react-query": "3.39.0",
"react-router-dom": "4.2.2",
"react-socks": "2.2.0",
"react-string-replace": "0.4.1",
"react-super-select": "1.0.23",
"react-table": "6.8.6",
"react-table-hoc-fixed-columns": "1.0.0-beta.9",
"react-toastify": "5.5.0",
"react-toggle": "4.1.3",
"shell-quote": "1.7.3",
"string-replace-to-array": "1.0.3",
"styled-components": "5.3.5",
"sweetalert": "2.1.2",
"sync-request": "6.0.0",
"tar": "6.1.11",
"ts-node": "10.9.1",
"ts-node-dev": "2.0.0",
"uglify-js": "3.15.5",
"url-parse": "1.5.10",
"uuid": "8.3.2",
"webpack-dev-middleware": "5.3.3"
}
}
Installing devDependency "husky": "0.14.3" is the culprit.
I've created scoped package #scope/eslint-config with content
{
"name": "#scope/eslint-config",
"version": "1.0.3",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-eslint": "8.2.5",
"eslint": "5.1.0",
"eslint-config-airbnb": "17.0.0",
"eslint-config-prettier": "2.9.0",
"eslint-plugin-css-modules": "2.7.5",
"eslint-plugin-flowtype": "2.50.0",
"eslint-plugin-import": "2.13.0",
"eslint-plugin-jsx-a11y": "6.1.0",
"eslint-plugin-prettier": "2.6.2",
"eslint-plugin-react": "7.10.0",
"eslint-plugin-require-jsdoc-except": "1.1.0"
}
}
and in my project added it as "#scoped/eslint-config": "1.0.2",
However after running yarn install I see only that package without any dependency. But it works with npm
I've tried both yarn v1.8.0, v1.7.0 and v1.6.0
Have you met the troubles? Any solution?
In npm it works due to the flattern structure.
For yarn you need to say --flat but it causes other troubles
https://github.com/eslint/eslint/issues/5501
https://github.com/eslint/eslint/issues/3458
npm now installs a package-lock.json every time which seems to be a part of npm now. However, this simple package.json file when run with npm install installs over 300 packages. what could be going wrong and why are there 300+? even without the package-lock file when run (it then creates the lock file) and still gives 300+ packages
{
"name": "Package",
"version": "0.0.1",
"dependencies": {},
"devDependencies": {
"grunt": "^1.0.2",
"grunt-contrib-clean": "^1.1.0",
"grunt-contrib-compress": "^1.4.3",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-connect": "^1.0.2",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^2.2.1",
"grunt-contrib-uglify": "^3.3.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-sass": "^2.1.0",
"grunt-usemin": "^3.1.1"
}
}
Those packages depend on other packages, which depend on other packages, which depend on yet other packages…. A package manager resolves that entire dependency graph, which can easily grow into the hundreds from an innocent-looking initial list.
The package-lock.json file you mention can help you understand how this happens for your particular dependencies. Look for "requires". For example, in your setup, grunt-sass requires node-sass:
"grunt-sass": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/grunt-sass/-/grunt-sass-2.1.0.tgz",
"integrity": "sha512-XkexnQt/9rhReNd+Y7T0n/2g5FqYOQKfi2iSlpwDqvgs7EgEaGTxNhnWzHnbW5oNRvzL9AHopBG3AgRxL0d+DA==",
"dev": true,
"requires": {
"each-async": "1.1.1",
"node-sass": "4.9.0",
"object-assign": "4.1.1"
}
},
…which has 19 separate dependencies:
"node-sass": {
"version": "4.9.0",
...
"requires": {
"async-foreach": "0.1.3",
"chalk": "1.1.3",
"cross-spawn": "3.0.1",
"gaze": "1.1.3",
"get-stdin": "4.0.1",
"glob": "7.0.6",
"in-publish": "2.0.0",
"lodash.assign": "4.2.0",
"lodash.clonedeep": "4.5.0",
"lodash.mergewith": "4.6.1",
"meow": "3.7.0",
"mkdirp": "0.5.1",
"nan": "2.10.0",
"node-gyp": "3.6.2",
"npmlog": "4.1.2",
"request": "2.79.0",
"sass-graph": "2.2.4",
"stdout-stream": "1.4.0",
"true-case-path": "1.0.2"
},
...
}
…and just one of those, request, itself introduces another 20:
"request": {
"version": "2.87.0",
...
"requires": {
"aws-sign2": "0.7.0",
"aws4": "1.7.0",
"caseless": "0.12.0",
"combined-stream": "1.0.6",
"extend": "3.0.1",
"forever-agent": "0.6.1",
"form-data": "2.3.2",
"har-validator": "5.0.3",
"http-signature": "1.2.0",
"is-typedarray": "1.0.0",
"isstream": "0.1.2",
"json-stringify-safe": "5.0.1",
"mime-types": "2.1.18",
"oauth-sign": "0.8.2",
"performance-now": "2.1.0",
"qs": "6.5.2",
"safe-buffer": "5.1.2",
"tough-cookie": "2.3.4",
"tunnel-agent": "0.6.0",
"uuid": "3.2.1"
}
},
You can see how it gets to 300 so quickly.
When I run create-react-native-app I'm getting a peer dependency for react-native-maps to use react-native#0.54. I need to be able to use react-native#0.55.2 and react#16.3.1
Presented below is the package.json file for react-native-maps. Notice line 81,82,97 and 98
could someone show how to edit this json file and how to update react-native-maps?
When I tried with:
npm --depth 9999 update
I ended up getting tons of errors about duplicate packages.
{
"_from": "react-native-maps#0.21.0",
"_id": "react-native-maps#0.21.0",
"_inBundle": false,
"_integrity": "sha512-FkCCV1AyaT5ut5ZTKNIdFWBxRUXZovGTydy7U4Cyifj2dv0Q3Sv21B0Myj+aoGhJhvBJzxsU25dDGQN3TP7b/Q==",
"_location": "/react-native-maps",
"_phantomChildren": {
"babel-plugin-check-es2015-constants": "6.22.0",
"babel-plugin-syntax-async-functions": "6.13.0",
"babel-plugin-syntax-class-properties": "6.13.0",
"babel-plugin-syntax-flow": "6.18.0",
"babel-plugin-syntax-jsx": "6.18.0",
"babel-plugin-syntax-trailing-function-commas": "6.22.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-es2015-arrow-functions": "6.22.0",
"babel-plugin-transform-es2015-block-scoping": "6.26.0",
"babel-plugin-transform-es2015-classes": "6.24.1",
"babel-plugin-transform-es2015-computed-properties": "6.24.1",
"babel-plugin-transform-es2015-destructuring": "6.23.0",
"babel-plugin-transform-es2015-for-of": "6.23.0",
"babel-plugin-transform-es2015-function-name": "6.24.1",
"babel-plugin-transform-es2015-literals": "6.22.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.26.2",
"babel-plugin-transform-es2015-parameters": "6.24.1",
"babel-plugin-transform-es2015-shorthand-properties": "6.24.1",
"babel-plugin-transform-es2015-spread": "6.22.0",
"babel-plugin-transform-es2015-template-literals": "6.22.0",
"babel-plugin-transform-flow-strip-types": "6.22.0",
"babel-plugin-transform-object-assign": "6.22.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-plugin-transform-react-display-name": "6.25.0",
"babel-plugin-transform-react-jsx": "6.24.1",
"babel-plugin-transform-react-jsx-source": "6.22.0",
"babel-plugin-transform-regenerator": "6.26.0",
"lodash": "4.17.10",
"react-transform-hmr": "1.0.4"
},
"_requested": {
"type": "version",
"registry": true,
"raw": "react-native-maps#0.21.0",
"name": "react-native-maps",
"escapedName": "react-native-maps",
"rawSpec": "0.21.0",
"saveSpec": null,
"fetchSpec": "0.21.0"
},
"_requiredBy": [
"/expo"
],
"_resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.21.0.tgz",
"_shasum": "005f58e93d7623ad59667e8002101970ddf235c2",
"_spec": "react-native-maps#0.21.0",
"_where": "d:\\atestbed\\native-react\\lecture4-contacts\\node_modules\\expo",
"author": {
"name": "Leland Richardson",
"email": "leland.m.richardson#gmail.com"
},
"bugs": {
"url": "https://github.com/airbnb/react-native-maps/issues"
},
"bundleDependencies": false,
"dependencies": {
"babel-plugin-module-resolver": "^2.3.0",
"babel-preset-react-native": "1.9.0"
},
"deprecated": false,
"description": "React Native Mapview component for iOS + Android",
"devDependencies": {
"babel-eslint": "^6.1.2",
"babel-preset-airbnb": "^1.1.1",
"eslint": "^3.3.1",
"eslint-config-airbnb": "^10.0.1",
"eslint-plugin-import": "^1.14.0",
"eslint-plugin-jsx-a11y": "^2.1.0",
"eslint-plugin-prefer-object-spread": "^1.1.0",
"eslint-plugin-react": "^6.1.2",
"gitbook-cli": "^2.3.0",
"lodash": "^4.17.2",
"prop-types": "^15.5.10",
"react": "^16.3.0-alpha.1",
"react-native": "^0.54"
},
"homepage": "https://github.com/airbnb/react-native-maps#readme",
"keywords": [
"react",
"react-native",
"react-component",
"map",
"mapview",
"google-maps",
"mapkit"
],
"main": "index.js",
"name": "react-native-maps",
"peerDependencies": {
"react": "^16.0",
"react-native": "^0.51 || ^0.52 || ^0.53 || ^0.54",
"prop-types": "^15.0 || ^16.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/airbnb/react-native-maps.git"
},
"rnpm": {
"android": {
"sourceDir": "./lib/android"
}
},
"scripts": {
"build": "npm run build:js && npm run build:android && npm run build:ios",
"build:android": "./gradlew :react-native-maps:assembleDebug",
"build:ios": "bundle install --path ./example/ios/bundles && bundle exec pod install --project-directory=./example/ios/",
"build:js": "exit 0",
"ci": "npm run lint",
"lint": "eslint ./",
"preversion": "./scripts/update-version.js",
"run:android": "./gradlew installDebug && npm run start:android",
"run:ios": "react-native run-ios --project-path ./example/ios",
"run:packager": "./node_modules/react-native/packager/packager.sh",
"start": "node node_modules/react-native/local-cli/cli.js start",
"start:android": "adb shell am start -n com.airbnb.android.react.maps.example/.MainActivity"
},
"version": "0.21.0"
}
ok, so if we just update the package.json file for react-native-maps in the following way:
under devDependencies:
"react": "^16.3.1",
"react-native": "^0.55.2"
under peerDependencies:
"react": "^16.3.1",
"react-native": "^0.55",
then back in the top project install eslint#4.0.0 and ajv#6.0.0 and add them to the dependencies in the package.json.
I am trying to create a new development environment for an app using angularfire2 package, downloading the source code from a repository.
The package.json file points to version 2.0.0-beta.6 of angularfire2, as in the following snippet
{
"name": "blah blah",
"author": "blah blah",
...
"dependencies": {
....
"angularfire2": "^2.0.0-beta.6",
...
}
.....
}
I run npm install to download all the packages I need.
Unfortunately, in case of angularfire2, what gets downloaded seems to be a different version of the package (probably 2.0.0-beta.8) which has several breaking changes with respect to version 2.0.0-beta.6.
How is this possible?
The package.json file within the angularfire2 directory (under node_modules) is the following
{
"_args": [
[
{
"raw": "angularfire2#^2.0.0-beta.6",
"scope": null,
"escapedName": "angularfire2",
"name": "angularfire2",
"rawSpec": "^2.0.0-beta.6",
"spec": ">=2.0.0-beta.6 <3.0.0",
"type": "range"
},
"/Users/penrico/ThoughWorks/code/angular/castella"
]
],
"_from": "angularfire2#>=2.0.0-beta.6 <3.0.0",
"_id": "angularfire2#2.0.0-beta.8",
"_inCache": true,
"_location": "/angularfire2",
"_nodeVersion": "6.9.1",
"_npmOperationalInternal": {
"host": "packages-18-east.internal.npmjs.com",
"tmp": "tmp/angularfire2-2.0.0-beta.8.tgz_1487250058126_0.7350442344322801"
},
"_npmUser": {
"name": "davideast",
"email": "dceast#gmail.com"
},
"_npmVersion": "3.10.8",
"_phantomChildren": {},
"_requested": {
"raw": "angularfire2#^2.0.0-beta.6",
"scope": null,
"escapedName": "angularfire2",
"name": "angularfire2",
"rawSpec": "^2.0.0-beta.6",
"spec": ">=2.0.0-beta.6 <3.0.0",
"type": "range"
},
"_requiredBy": [
"/"
],
"_resolved": "https://registry.npmjs.org/angularfire2/-/angularfire2-2.0.0-beta.8.tgz",
"_shasum": "8ec172ff17448c3ccdb79e9c6179da556ff05e1b",
"_shrinkwrap": null,
"_spec": "angularfire2#^2.0.0-beta.6",
"_where": "/Users/penrico/ThoughWorks/code/angular/castella",
"author": {
"name": "jeffbcross,davideast"
},
"bugs": {
"url": "https://github.com/angular/angularfire2/issues"
},
"dependencies": {},
"description": "<p align=\"center\"> <h1 align=\"center\">AngularFire2</h1> <p align=\"center\">The official library for Firebase and Angular 2</p> </p>",
"devDependencies": {
"#angular/compiler-cli": "^2.0.0",
"#angular/platform-server": "^2.0.0-rc.5",
"#types/jasmine": "^2.5.36",
"#types/request": "0.0.30",
"concurrently": "^2.2.0",
"conventional-changelog-cli": "^1.2.0",
"es6-module-loader": "^0.17.10",
"es6-shim": "^0.35.0",
"gulp": "^3.9.0",
"gulp-jasmine": "^2.2.1",
"gulp-typescript": "^2.10.0",
"http-server": "^0.8.5",
"jasmine": "^2.4.1",
"jasmine-core": "^2.4.1",
"json": "^9.0.3",
"karma": "^0.13.19",
"karma-chrome-launcher": "^0.2.2",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "^0.3.6",
"karma-mocha-reporter": "^2.0.2",
"karma-systemjs": "^0.10.0",
"ncp": "^2.0.0",
"parse5": "^1.3.2",
"protractor": "3.0.0",
"reflect-metadata": "0.1.2",
"rimraf": "^2.5.4",
"rollup": "^0.35.11",
"rollup-watch": "^2.5.0",
"systemjs": "^0.19.16",
"systemjs-builder": "^0.15.7",
"traceur": "0.0.96",
"typedoc": "github:jeffbcross/typedoc",
"typescript": "^2.0.2",
"zone.js": "^0.7.2"
},
"directories": {},
"dist": {
"shasum": "8ec172ff17448c3ccdb79e9c6179da556ff05e1b",
"tarball": "https://registry.npmjs.org/angularfire2/-/angularfire2-2.0.0-beta.8.tgz"
},
"homepage": "https://github.com/angular/angularfire2#readme",
"keywords": [
"angular2",
"angular",
"firebase"
],
"license": "MIT",
"main": "bundles/angularfire2.umd.js",
"maintainers": [
{
"name": "angularcore",
"email": "angular-core+npm#google.com"
},
{
"name": "davideast",
"email": "dceast#gmail.com"
},
{
"name": "jeffbcross",
"email": "middlefloor#gmail.com"
}
],
"module": "index.js",
"name": "angularfire2",
"optionalDependencies": {},
"peerDependencies": {
"#angular/common": "^2.0.0",
"#angular/compiler": "^2.0.0",
"#angular/core": "^2.0.0",
"#angular/platform-browser": "^2.0.0",
"#angular/platform-browser-dynamic": "^2.0.0",
"firebase": "^3.0.0",
"rxjs": "^5.0.1"
},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/angular/angularfire2.git"
},
"scripts": {},
"typings": "index.d.ts",
"version": "2.0.0-beta.8"
}
The first breaking change (just to make an example that sustains my theory that this is a different version of the package) is that there is no more FirebaseAuth (which seems to be substituted by AngularFireAuth).
It's installing a later version, as that version satisfies the caret range you have specified in the package.json file:
"angularfire2": "^2.0.0-beta.6"
If you want a specific version, remove the caret:
"angularfire2": "2.0.0-beta.6"
Looking at the spec - under that NPM has filled out under _requested in the package.json file that's in node_modules/angularfire2 - you can see that caret range you have specified is equivalent to:
"spec": ">=2.0.0-beta.6 <3.0.0",