I have a sample web project which has client and server, so before commit any files I have added husky to make the formatting changes, when I add it as script it works but when I do git add . and git commit its showing as
No staged files match any configured task.
What am I doing wrong here.
client
package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
},
"devDependencies": {
"husky": "^4.3.8",
"lint-staged": "^12.3.1",
"prettier": "^2.5.1",
}
server
package.json
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
"prettier --write"
]
},
"devDependencies": {
"husky": "^4.3.8",
"lint-staged": "^12.3.1",
"prettier": "^2.5.1",
}
What am I doing here wrong, any help is appreciated
Check first if, as in typicode/husky issue 767, a npm rebuild is needed.
Double-check also the installation process to see if a simple npm test, for instance, would work (npx husky add .husky/pre-commit "npm test")
Related
I'm having an unusual problem running a basic Framework7 project with vue.
Once created a Framework7 Vue project with the command: framework7 create --ui and installed the dependencies with npm i get the following problem: Could not resolve "vue"
in all packages because the script is looking for vue inside a esm folder like: ../../../node_modules/swiper/esm/vue/swiper.js:1:79 and it's quite strange because esm folder is never existed.
The strange thing is that the same project, with the same package.json works perfectly in another pc with the same version of node (v16.14.2) and npm (8.7.0)
So the problem must be in my pc. I thought about some cache problem, but despite forcing a cache cleanup the problem remains.
For completeness I leave the json package, which is the same that framework7 create --ui command creates for a Vue project.
Has anyone ever had a similar problem or know what the cause might be?
I guess the problem could be related to npm or vite.
{
"name": "my-app",
"private": true,
"version": "1.0.0",
"description": "My App",
"repository": "",
"license": "UNLICENSED",
"scripts": {
"start": "npm run dev",
"dev": "cross-env NODE_ENV=development vite",
"build": "cross-env NODE_ENV=production vite build && npx workbox generateSW workbox-config.js",
"build-capacitor-ios": "cross-env NODE_ENV=production vite build && npx cap copy ios",
"build-capacitor-android": "cross-env NODE_ENV=production vite build && npx cap copy android",
"postinstall": "cpy --flat ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy --flat ./node_modules/material-icons/iconfont/*.* ./src/fonts/"
},
"browserslist": [
"IOS >= 13",
"Safari >= 13",
"last 5 Chrome versions",
"last 5 Firefox versions",
"Samsung >= 12"
],
"dependencies": {
"#capacitor/android": "^3.4.3",
"#capacitor/app": "^1.1.1",
"#capacitor/browser": "^1.0.7",
"#capacitor/core": "^3.4.3",
"#capacitor/ios": "^3.4.3",
"#capacitor/keyboard": "^1.2.2",
"#capacitor/splash-screen": "^1.2.2",
"#capacitor/status-bar": "^1.0.8",
"dom7": "^4.0.4",
"framework7": "^7.0.1",
"framework7-icons": "^5.0.5",
"framework7-vue": "^7.0.1",
"material-icons": "^1.10.8",
"skeleton-elements": "^4.0.0",
"swiper": "^8.1.1",
"vue": "^3.2.33"
},
"devDependencies": {
"#capacitor/cli": "^3.4.3",
"#vitejs/plugin-vue": "^2.3.1",
"#vue/compiler-sfc": "^3.2.33",
"cordova-res": "^0.15.4",
"cpy-cli": "^4.1.0",
"cross-env": "^7.0.3",
"postcss-preset-env": "^7.4.3",
"vite": "^2.9.5",
"workbox-cli": "^6.5.3"
}
}
Changing in vite.config.js works for me. I have used the node_modules path for all the external bundle related errors
You can mark the path "vue" as external to exclude it from the bundle, which will remove this error.
import path from 'path';
import vue from '#vitejs/plugin-vue';
const SRC_DIR = path.resolve(__dirname, './src');
const PUBLIC_DIR = path.resolve(__dirname, './public');
const BUILD_DIR = path.resolve(__dirname, './www',);
function getPath(new_path) {
return path.resolve(__dirname, 'node_modules/' + new_path);
}
export default {
plugins: [
vue(),
],
root: SRC_DIR,
base: '',
publicDir: PUBLIC_DIR,
build: {
outDir: BUILD_DIR,
assetsInlineLimit: 0,
emptyOutDir: true,
rollupOptions: {
treeshake: false,
},
},
resolve: {
alias: {
'#': SRC_DIR,
"vue": getPath('vue/dist/vue.runtime.esm-browser.js'),
"framework7/lite-bundle": getPath('framework7/framework7-lite-bundle.esm.js'),
"framework7-vue/bundle": getPath('framework7-vue/framework7-vue-bundle.js'),
"swiper/vue": getPath('swiper/vue/swiper-vue.js'),
"skeleton-elements/vue": getPath('skeleton-elements/vue/index.js'),
},
},
server: {
host: true,
},
};
Is there any way to either (a) disallow a node application from require/importing globally-installed npm modules, or (b) at least output a warning when a globally-installed module is used?
Reason being: I've repeatedly wound up in situations where a developer (myself included) incorporates a module in a node application but fails to add it to package.json because it happens to be globally installed on their machine, and therefore there's no error on the local machine; but upon deployment to a system that doesn't have that module installed globally, of course, it fails. Would be convenient to just ensure that all modules are in fact included in package.json.
ESLint Way
1) use husky module: npm install husky --save-dev
2) install eslint and it's deps (see package.json example below).
3) example package.json:
{
"name": "shopping-cart-estimator-test",
"version": "1.0.0",
"description": "",
"scripts": {
"start": "node ports/http.js",
"eslint-check": "./node_modules/eslint/bin/eslint.js .",
"eslint-fix": "./node_modules/eslint/bin/eslint.js . --fix",
"test": "./node_modules/.bin/mocha test --exit"
},
"devDependencies": {
"babel-eslint": "^10.1.0",
"husky": "^4.2.5",
"mocha": "^7.1.2",
"eslint": "^7.0.0",
"eslint-config-import": "^0.13.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.1"
},
"dependencies": {
"lodash": "^4.17.15"
},
"husky": {
"hooks": {
"pre-commit": "npm run eslint-check && npm test",
"pre-push": "npm run eslint-check && npm test"
}
}
}
4) create .eslintrc.js file with import/no-extraneous-dependencies rule (it requires eslint-plugin-import, make sure it's in package.json):
module.exports = {
"extends": "standard",
"parser": "babel-eslint",
"rules": {
"semi": ["error", "always"],
"no-unused-vars": 1,
"spaced-comment": ["warn"],
"no-trailing-spaces": ["warn"],
"comma-dangle": ["error", {
"arrays": "always",
"objects": "always",
"imports": "never",
"exports": "never",
"functions": "never"
}],
"space-before-function-paren": ["error", {
"anonymous": "always",
"named": "never",
"asyncArrow": "always"
}],
"import/no-extraneous-dependencies": ["error", {"packageDir": __dirname}],
},
"overrides": [{
"files": ["spec/tests/*.js", "spec/tests/**/*.js"],
"rules": {
"no-unused-expressions": 0,
"no-unused-vars": 1
}
}]
};
"Custom Script way"
1) use husky module: npm install husky --save-dev
2) add hook to pre-commit, pre-push in package.json:
"husky": {
"hooks": {
"pre-commit": "npm test && node scripts/check-deps.js",
"pre-push": "npm test && node scripts/check-deps.js"
}
}
3) install dependency-tree: npm i --save dependency-tree
4) write scripts/check-deps.js script that will find external (non package.json) dependencies and if they exist will:
console.warn('Found external dependency');
process.exit(-1);
Our production environment have to using "npm install --production" to install the project, but when trigger "npm run serve" that encounter Below error:
'vue-cli-service' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
Here is the command sequence :
npm install --production
npm run serve
Below is the package.json
{
"name": "xxxxxx",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.7.0",
"core-js": "^3.4.3",
"vue": "^2.6.11",
"vue-router": "^3.1.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"babel-eslint": "^10.0.3",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 1%",`enter code here`
"last 2 versions"
]
}
Could anyone help on this case ? Many thanks...
Does the serve script require your devDependencies? If you run npm install then npm run serve does it work?
Can you run vue --version from your prod environment? That error makes me think the whole #vue/cli global install is missing.
Post may be a dupe: How to solve 'vue-cli-service' is not recognized as an internal or external command?
Just in case, you may want to rm -rf node_modules then install, then serve.
I updated all packages but still getting this error after running npm run serve:
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Cannot find module 'prettier' Occurred while linting /home
My package.json
{
"name": "app",
"version": "0.1.0",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.2.1",
"firebase": "^7.0.0",
"material-icons": "^0.3.1",
"register-service-worker": "^1.6.2",
"vue": "^2.6.10",
"vue-flickity": "^1.2.1",
"vue-router": "^3.1.3",
"vuetify": "^2.0.19",
"vuex": "^3.1.1"
},
"devDependencies": {
"#mdi/font": "^4.4.95",
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-eslint": "^3.11.0",
"#vue/cli-plugin-pwa": "^3.11.0",
"#vue/cli-service": "^3.11.0",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.4.0",
"eslint-plugin-vue": "^5.2.3",
"material-design-icons-iconfont": "^5.0.1",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"uglifyjs-webpack-plugin": "^2.2.0",
"vue-cli-plugin-vuetify": "^0.6.3",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.3.0",
"webpack": "^4.41.0",
"webpack-cli": "^3.3.9"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {
"no-console": "off"
},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
**"#vue/eslint-config-prettier": "^5.0.0",** is listed in the dependencies. How to fix this issue? (I'm using VSCODE on Ubuntu)
I tried multiple times deleting package-lock.json and node_modules and running npm install afterwards. Nothing fixes it - even updating all packages globally.
Prettier is a peer dependency of
#vue/eslint-config-prettier so you need to add it to your own dependencies:
npm install --save-dev prettier
With NPM
npm install --save-dev prettier
With Yarn
yarn add --dev prettier
if you're using yarn 3, and yarn add --dev prettier doesn't solve your problem, try this:
cmd + shift + p
in the dropdown, search for preferences: open user settings (json)
add "prettier.prettierPath": ".yarn/sdks/prettier/index.js" to your json file.
This tells your editor to find the module in the path you added.
Hello guys I'm trying to learn Webpack I've been following some tutorials and I've run into some problems. I've installed webpack locally in folder I am working in with npm install webpack --save-dev. I made two JS scripts and I wanted to bundle them and I've tried following command webpack script-1.js /.bundle.js in WindowsPowerShell (I'm using Windows 7). Now this made the following error
webpack is not recognized as an internal or external command operable program or batch file
So then I installed webpack globally, and when I used the same command in PowerShell (I have opened it as an admin), it made bundle.js file but not in the directory I was working in, but in C:
Now after this failure I've decided to try using git bash. First I've tried this command webpack script-1.js /.bundle.js and got the following error
bash: webpack: command not found
Finally after some trying I was able to make it work using this command in git bash node_modules/.bin/webpack ./script-1.js bundle.js
Is there a way to fix this, so I can just type webpack instead of whole path ? Also is there a way to fix path in PowerShell ?
This is mine package.json
{
"name": "webpack-playlist",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/iamshaunjp/webpack-playlist.git"
},
"author": "me",
"license": "MIT",
"bugs": {
"url": "https://github.com/iamshaunjp/webpack-playlist/issues"
},
"homepage": "https://github.com/iamshaunjp/webpack-playlist#readme",
"devDependencies": {
"webpack": "^2.3.3"
}
}
and this is package.json located in node_modules/webpack/package.json
{
"_args": [
[
{
"raw": "webpack",
"scope": null,
"escapedName": "webpack",
"name": "webpack",
"rawSpec": "",
"spec": "latest",
"type": "tag"
},
"C:\\Users\\Djole\\Desktop\\NetNinja\\webpack-playlist"
]
],
"_from": "webpack#latest",
"_id": "webpack#2.3.3",
"_inCache": true,
"_location": "/webpack",
"_nodeVersion": "7.4.0",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/webpack-2.3.3.tgz_1491205859622_0.6350918470416218"
},
"_npmUser": {
"name": "sokra",
"email": "tobias.koppers#googlemail.com"
},
"_npmVersion": "4.0.5",
"_phantomChildren": {},
"_requested": {
"raw": "webpack",
"scope": null,
"escapedName": "webpack",
"name": "webpack",
"rawSpec": "",
"spec": "latest",
"type": "tag"
},
"_requiredBy": [
"#DEV:/",
"#USER"
],
"_resolved": "https://registry.npmjs.org/webpack/-/webpack-2.3.3.tgz",
"_shasum": "eecc083c18fb7bf958ea4f40b57a6640c5a0cc78",
"_shrinkwrap": null,
"_spec": "webpack",
"_where": "C:\\Users\\Djole\\Desktop\\NetNinja\\webpack-playlist",
"author": {
"name": "Tobias Koppers #sokra"
},
"bin": {
"webpack": "./bin/webpack.js"
},
"bugs": {
"url": "https://github.com/webpack/webpack/issues"
},
"dependencies": {
"acorn": "^4.0.4",
"acorn-dynamic-import": "^2.0.0",
"ajv": "^4.7.0",
"ajv-keywords": "^1.1.1",
"async": "^2.1.2",
"enhanced-resolve": "^3.0.0",
"interpret": "^1.0.0",
"json-loader": "^0.5.4",
"loader-runner": "^2.3.0",
"loader-utils": "^0.2.16",
"memory-fs": "~0.4.1",
"mkdirp": "~0.5.0",
"node-libs-browser": "^2.0.0",
"source-map": "^0.5.3",
"supports-color": "^3.1.0",
"tapable": "~0.2.5",
"uglify-js": "^2.8.5",
"watchpack": "^1.3.1",
"webpack-sources": "^0.2.3",
"yargs": "^6.0.0"
},
"description": "Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.",
"devDependencies": {
"beautify-lint": "^1.0.3",
"benchmark": "^2.1.1",
"bundle-loader": "~0.5.0",
"codacy-coverage": "^2.0.1",
"codecov.io": "^0.1.2",
"coffee-loader": "~0.7.1",
"coffee-script": "^1.10.0",
"coveralls": "^2.11.2",
"css-loader": "~0.25.0",
"es6-promise-polyfill": "^1.1.1",
"eslint": "3.12.2",
"eslint-plugin-node": "^3.0.5",
"express": "~4.13.1",
"extract-text-webpack-plugin": "^2.0.0-beta",
"file-loader": "~0.9.0",
"i18n-webpack-plugin": "^0.3.0",
"istanbul": "^0.4.5",
"jade": "^1.11.0",
"jade-loader": "~0.8.0",
"js-beautify": "^1.5.10",
"less": "^2.5.1",
"less-loader": "^2.0.0",
"lodash": "^4.17.4",
"mocha": "^3.2.0",
"mocha-lcov-reporter": "^1.0.0",
"nsp": "^2.6.1",
"raw-loader": "~0.5.0",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"script-loader": "~0.7.0",
"should": "^11.1.1",
"simple-git": "^1.65.0",
"sinon": "^1.17.7",
"style-loader": "~0.13.0",
"url-loader": "~0.5.0",
"val-loader": "~0.5.0",
"vm-browserify": "~0.0.0",
"webpack-dev-middleware": "^1.9.0",
"worker-loader": "~0.7.0"
},
"directories": {},
"dist": {
"shasum": "eecc083c18fb7bf958ea4f40b57a6640c5a0cc78",
"tarball": "https://registry.npmjs.org/webpack/-/webpack-2.3.3.tgz"
},
"engines": {
"node": ">=4.3.0 <5.0.0 || >=5.10"
},
"files": [
"lib/",
"bin/",
"buildin/",
"hot/",
"web_modules/",
"schemas/"
],
"gitHead": "ba24c1b163dc038ed738eb4a57dcb241bf63146d",
"homepage": "https://github.com/webpack/webpack",
"license": "MIT",
"main": "lib/webpack.js",
"maintainers": [
{
"name": "jhnns",
"email": "mail#johannesewald.de"
},
{
"name": "sokra",
"email": "tobias.koppers#googlemail.com"
},
{
"name": "thelarkinn",
"email": "sean.larkin#cuw.edu"
}
],
"name": "webpack",
"optionalDependencies": {},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/webpack/webpack.git"
},
"scripts": {
"appveyor:benchmark": "npm run benchmark",
"appveyor:test": "node --max_old_space_size=4096 node_modules\\mocha\\bin\\mocha --harmony test/*.test.js",
"beautify-lint": "beautify-lint 'lib/**/*.js' 'hot/**/*.js' 'bin/**/*.js' 'benchmark/*.js' 'test/*.js'",
"benchmark": "mocha test/*.benchmark.js --harmony -R spec",
"build:examples": "cd examples && node buildAll.js",
"cover": "node --harmony ./node_modules/istanbul/lib/cli.js cover -x '**/*.runtime.js' node_modules/mocha/bin/_mocha -- test/*.test.js",
"cover:min": "node --harmony ./node_modules/.bin/istanbul cover -x '**/*.runtime.js' --report lcovonly node_modules/mocha/bin/_mocha -- test/*.test.js",
"lint": "eslint lib bin hot buildin test/**/webpack.config.js test/binCases/**/test.js examples/**/webpack.config.js",
"lint-files": "npm run lint && npm run beautify-lint",
"nsp": "nsp check --output summary",
"pretest": "npm run lint-files",
"publish-patch": "npm run lint && npm run beautify-lint && mocha && npm version patch && git push && git push --tags && npm publish",
"test": "mocha test/*.test.js --harmony --check-leaks",
"travis:benchmark": "npm run benchmark",
"travis:lint": "npm run lint-files && npm run nsp",
"travis:test": "npm run cover:min"
},
"version": "2.3.3",
"web": "lib/webpack.web.js"
}
EDIT:
I've come with following solution in the end:
Add this to your package.json file
"scripts" : {
"build" : "webpack ./entry.js bundle.js"
}
and then type npm run build this will still run the local version because npm will first look in ./node_modules/.bin/
That kind of path is what is used in a git for Windows bash.
See this issue
We use cmdr (http://cmder.net/ ) to emulate console on Windows machines.
Still we had to modify scripts and separate build to clean and build tasks to get it working.
"scripts": {
"clean": "rm -rf dist",
"build": "node_modules/.bin/babel-node -- ./node_modules/webpack/bin/webpack.js --stats --config ./webpack/prod.config.js",
...
},
You can see a similar instruction in this project package.json:
"build-main": "cross-env NODE_ENV=production node -r babel-register ./node_modules/webpack/bin/webpack --config webpack.config.electron.js --progress --profile --colors",