Some updates to a dependency of one of our dependencies broke our build and was a bit tricky to find out what the cause of the issue was...
We finally noticed that #vue/component-compiler-utils requires "prettier": "^1.11.1" and - as discussed in vue webpack template missing parser that Prettier#1.13.0 causes the issue we were having, before rolling back to Prettier#1.12.0
How do we ensure that package-lock.json "locks" dependencies to a version and do not update over time or when re-installed?
This is an example of our package.json from which the incorrect lock file is generated:
{
...
"dependencies": {
"html-loader": "0.5.1",
"vue": "2.5.16",
"vue-class-component": "6.2.0",
"vue-property-decorator": "6.1.0",
"vue-router": "3.0.1",
"vuex": "3.0.1",
"vuex-class": "0.3.0",
...
},
"devDependencies": {
"#types/jest": "22.0.1",
"#vue/cli-plugin-babel": "3.0.0-beta.11",
"#vue/cli-plugin-eslint": "3.0.0-beta.11",
"#vue/cli-plugin-typescript": "3.0.0-beta.11",
"#vue/cli-plugin-unit-jest": "3.0.0-beta.7",
"#vue/cli-service": "3.0.0-beta.11",
"#vue/eslint-config-airbnb": "3.0.0-beta.11",
"#vue/eslint-config-typescript": "3.0.0-beta.11",
...
}
}
Using npm shrinkwrap fixes the issue, it converts package-lock.json to a npm-shrinkwrap.json which hashes and locks every specific version installed.
See What is the difference between npm-shrinkwrap.json and package-lock.json? for more details
I'm not entirely sure if npm shrinkwrap fixes the issue in npm v6+.
Here is a snippet of the npm-shrinkwrap.json file that is being generated for vue-loader.
It seems as though even the shrinkwrap is not locking down the requires versions.
"vue-loader": {
"version": "14.0.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-14.0.3.tgz",
"integrity": "sha512-5kFK/df1jgVoFcTB9p19rrYcyuYduoZzUSf6chMVsIRmVL9AKPYCa9JGLAZsU1XXGbGO9MSkwbum91u2dx7YcQ==",
"dev": true,
"requires": {
"consolidate": "^0.14.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"lru-cache": "^4.1.1",
"postcss": "^6.0.8",
"postcss-load-config": "^1.1.0",
"postcss-selector-parser": "^2.0.0",
"prettier": "^1.7.0",
"resolve": "^1.4.0",
"source-map": "^0.6.1",
"vue-hot-reload-api": "^2.2.0",
"vue-style-loader": "^4.0.1",
"vue-template-es2015-compiler": "^1.6.0"
}
Related
I have an Vuejs App using promise but get this error :
This dependency was not found: core-js/fn/promise in ./src/store/index.js To install it, you can run: npm install --save core-js/fn/promise
my package.json:
"dependencies": {
"axios": "^0.21.1",
"bootstrap": "^4.5.3",
"core-js": "^3.6.5",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"vue": "^2.6.11",
"vue-axios": "^3.2.2",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "~4.5.0",
"#vue/cli-plugin-vuex": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
I run the command npm install --save core-js/fn/promise ,but nothing change
I have the same err today, reason is import { reject } from "core-js/fn/promise",
I delete it then app compiled successfully.
Try update your core-js dependency version by:
npm install core-js
// or
yarn add core-js
The error is a result of yourProject/node_modules/core-js is not sync with your code.
You're importing core-js/fn/promise, but the build tool not found it.
I had a similar problem with core-js when I tried to start a Vue app, this was the error:
core-js/modules/es6.array.find in ./src/state/helpers.js,
* core-js/modules/es6.function.name in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/_base-link.vue?vue&type=script&lang=js&, ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/_base-icon.vue?vue&type=script&lang=js& and 4 others
...
..
..
my fix was to update dependencies and my package.json after the update is the next:
{
...
"dependencies": {
"core-js": "^2.6.12",
"vue": "2.5.16"
},
"devDependencies": {
"#babel/core": "^7.14.6",
}
}
Do the following steps:
npm install name dependency,
npm install
It's perfectly running for me.
The package react-canvas-draw has the following in its package.json on GitHub:
"dependencies": {
"catenary-curve": "^1.0.1",
"lazy-brush": "^1.0.1",
"prop-types": "^15.6.2",
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
"react": "16.x"
},
"devDependencies": {
"all-contributors-cli": "^5.4.1",
"babel-eslint": "^7.2.3",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.1.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"gh-pages": "^1.1.0",
"nwb": "0.21.x",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"style-loader": "^0.19.1"
},
However, when I view the package on NPM, I see:
"dependencies": {
"catenary-curve": "^1.0.1",
"codecov": "^3.5.0", // <-- note
"coveralls": "^3.0.4", // <-- note
"lazy-brush": "^1.0.1",
"prop-types": "^15.6.2",
"resize-observer-polyfill": "^1.5.0"
},
"peerDependencies": {
"react": "16.x"
},
"devDependencies": {
"all-contributors-cli": "^5.4.1",
"babel-eslint": "^7.2.3",
"css-loader": "^0.28.9",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.1.1",
"eslint-config-react-app": "^2.1.0",
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.6.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.1.0",
"gh-pages": "^1.1.0",
"nwb": "^0.21.5",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"style-loader": "^0.19.1"
},
I noted above the two additional packages that I see: codecov and coveralls. They're also displayed in the user-friendly site.
Why are these in the NPM package entry, but not in the GitHub source?
My only thought: the words codecov and coveralls only really exist in the .travis.yml file:
before_install:
- npm install codecov coveralls
- npm install nwb
...So, npm publish is detecting the npm install commands and adding dependencies to package.json? I can't find anything to support this, but I don't have any better ideas.
You're correct in your assumption, executing npm install as of NPM v5 will add them to the package.json as dependencies. The subsequent npm publish that travis runs is then including this "updated" dependency list in the package.
It's interesting that they're shipping with those packages, as they're primarily "dev dependencies" so don't need to be included in the distributed bundle. You may want to open an issue or pull request that either declares these as dev dependencies in the package.json or includes a --save-dev in the .travis.yml.
(Though the latter would not be that great either as it would "add" those as dev deps of the published module that are not reflected on the github source).
I'm trying to add unit testing to an existing vue project via jest, but when I attempt to run my first test I get an error that says
Vue packages version mismatch:
- vue#2.5.16
- vue-template-compiler#2.6.6
This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader#>=10.0, simply update vue-template-compiler.
If you are using vue-loader#<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.
But looking at my packages, my current vue version is 2.6.6 not 2.5.16. I have no idea where it's seeing this 2.5.16 version. I don't have vue installed globally, only #vue/cli#3.4.0. Any help would be appreciated. Below you can find my package.json that contains my jest configuration.
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"dependencies": {
"#babel/core": "^7.4.0",
"#tinymce/tinymce-vue": "^1.1.0",
"#types/bootstrap": "^3.3.40",
"#types/jest": "^24.0.11",
"#types/jquery": "^2.0.51",
"#types/jquery.validation": "^1.16.5",
"#types/jqueryui": "^1.12.6",
"#types/kendo-ui": "^2018.3.0",
"#types/knockout": "^3.4.60",
"#types/moment": "^2.13.0",
"axios": "^0.18.0",
"axios-cache-adapter": "^2.1.1",
"browser-detect": "^0.2.28",
"es6-promise": "^4.2.5",
"file-saver": "^1.3.8",
"knockout": "^3.4.2",
"moment-timezone": "^0.5.23",
"query-string": "^6.2.0",
"tinymce-vue": "^1.0.0",
"url-search-params-polyfill": "^5.0.0",
"vee-validate": "^2.1.3",
"vue": "^2.6.6",
"vue-class-component": "^6.3.2",
"vue-multiselect": "^2.1.3",
"vue-notification": "^1.3.13",
"vue-property-decorator": "^7.2.0",
"vue-router": "^3.0.2",
"vuejs-datepicker": "^1.5.4",
"vuex": "^3.0.1",
"vuex-persistedstate": "^2.5.4"
},
"scripts": {
"dev": "webpack --mode development --watch --hot",
"test": "npm run test:unit",
"test:unit": "jest",
"build": "webpack --mode production",
"output": "webpack --profile --json > stats.json"
},
"devDependencies": {
"#types/file-saver": "^1.3.1",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^6.26.3",
"babel-jest": "^24.7.1",
"babel-loader": "^8.0.4",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"css-loader": "^1.0.1",
"hard-source-webpack-plugin": "^0.13.1",
"jest": "^23.4.2",
"node-sass": "^4.10.0",
"printd": "^1.0.1",
"sass-loader": "^7.1.0",
"ts-jest": "^23.10.5",
"ts-loader": "^4.5.0",
"typescript": "^3.2.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"vue-jest": "^3.0.4",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.6.6",
"webpack": "^4.28.4",
"webpack-bundle-analyzer": "^3.0.3",
"webpack-cli": "^3.1.2",
"webpack-hot-middleware": "^2.24.3"
},
"jest": {
"moduleFileExtensions": [
"js",
"ts",
"json",
"vue"
],
"moduleDirectories": [
".",
"<rootDir>/Scripts",
"<rootDir>/Scripts/VueModules",
"<rootDir>/Scripts/VueModules/SharedComponents",
"<rootDir>/Scripts/VueModules/Candidates/",
"node_modules"
],
"moduleNameMapper": {
"^#candidates$": "<rootDir>/Scripts/VueModules/Candidates",
"^#shared$": "<rootDir>/Scripts/VueModules/SharedComponents",
"^#app$": "<rootDir>/Scripts/VueModules",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/Scripts/VueModules/__mocks__/fileMock.js",
"\\.(css|less|scss|sass)$": "<rootDir>/Scripts/VueModules/__mocks__/styleMock.js"
},
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.tsx?$": "ts-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!vue)"
],
"testURL": "http://localhost/",
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$"
}
}
You have "vue": "^2.6.6", and "vue-template-compiler": "^2.6.6", in your package.json meaning any version matching 2.6.6 or higher will be installed that explain the vue#2.5.16. Your package-lock.json file set the current version to which the package has been updated to, you can verify from there which version both vue and vue-template-compiler
You can run npm update or npm install vue-template-compiler#2.5.16 --save-dev to get both on the same version
Running the following command helped me
npm install vue-template-compiler#2.5.16 --save-dev
NB. Replace the version number with the right version that you need. In my case, the version of vue was 2.5.16 and vue-template-compiler was 2.5.13 hence I updated the vue-template-compiler to the version of the vue.
Hope this helps someone
Vue packages version mismatch error fix
npm update fixed the same problem for me.
Add the following lines to your Package.json
"vue-template-compiler": "^2.6.12"
and then run npm install in terminal.
There are a handful of other questions on here, but none that seem to be the same problem.
Running npm install on a preexisting package.json, pulled in from git, does all of its processing, creates a node_modules directory, then ends without installing the modules. node_modules is empty, and there were no errors (just a couple warnings about deprecated modules). The entire directory is owned by the active user.
After a bunch of messing around, I've found that if I remove all of the devDependencies, the normal dependencies will install as expected.
OS: Ubuntu 16.04
Node: 6.9.1
NPM: 3.10.8
package.json:
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon --ignore src --ignore public --ignore views",
"test": "node ../app.js"
},
"author": "xxx",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.5.1",
"babel-preset-es2015": "^6.18.0",
"babelify": "^7.3.0",
"browserify": "^13.1.1",
"chalk": "^1.1.3",
"event-stream": "^3.3.4",
"fs-extra": "^1.0.0",
"git-guppy": "^1.2.1",
"glob": "^7.1.1",
"gulp": "^3.9.1",
"gulp-cssnano": "^2.1.2",
"gulp-duration": "0.0.0",
"gulp-filter": "^4.0.0",
"gulp-function": "^2.2.0",
"gulp-git": "^1.12.0",
"gulp-livereload": "^3.8.1",
"gulp-notify": "^2.2.0",
"gulp-postcss": "^6.2.0",
"gulp-sourcemaps": "^2.2.0",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"guppy-pre-commit": "^0.4.0",
"postcss-cssnext": "^2.8.0",
"postcss-math": "0.0.5",
"precss": "^1.4.0",
"q": "^1.4.1",
"utils-merge": "^1.0.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0"
},
"dependencies": {
"axios": "^0.15.2",
"dotenv": "^2.0.0",
"express": "^4.14.0",
"fs": "0.0.1-security",
"git-rev-sync": "^1.8.0",
"pug": "^2.0.0-beta6",
"yamljs": "^0.2.8"
}
}
This is running on a basic DO server, the same distribution I've spun up for a dozen other projects, with no problem. The only thing I can think of is if there's something within one of the devDependencies that is clogging things up. How to debug this?
It appears that "fs" is not a valid npm package. I came to this conclusion after running this command:
npm bugs fs
This ended up displaying bugs filed against a npm/security-holder package. It appears that the "fs" on NPM may have been malicious.
If you want node's fs package, you don't need an entry in your package.json for that, fs is built-in.
I have the following in package.json.
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"laravel-elixir": "^4.0.0",
"bootstrap-sass": "^3.0.0"
}
}
After running npm install when I check node_modules, there are a lot of packages are installed. from .bin, abbrev to yeast. I think there are more than 200 packages. I thought npm installs only necessary packages including dependencies.
Q1: How can I avoid installing unnecessary packages and installing only necessary packages. Can I do it? Or do I need all packages?
Q2: Does npm install all npm packages?
Summary:
Q1: How can I avoid installing unnecessary packages and installing
only necessary packages. Can I do it? Or do I need all packages?
You are installing all dependencies required by the dependencies of your module (modules requiring modules).
Q2: Does npm install all npm packages?
No.
In depth:
You installed gulp. Here are gulp's dependencies:
"dependencies": {
"archy": "^1.0.0",
"chalk": "^1.0.0",
"deprecated": "^0.0.1",
"gulp-util": "^3.0.0",
"interpret": "^1.0.0",
"liftoff": "^2.1.0",
"minimist": "^1.1.0",
"orchestrator": "^0.3.0",
"pretty-hrtime": "^1.0.0",
"semver": "^4.1.0",
"tildify": "^1.0.0",
"v8flags": "^2.0.2",
"vinyl-fs": "^0.3.0"
}
archy has the following dependencies:
"dependencies": {
"ansi-styles": "^2.1.0",
"escape-string-regexp": "^1.0.2",
"supports-color": "^3.1.2"
},
interpret (still going through gulp dependencies) has the following dependencies:
"dependencies": {
"extend": "^2.0.1",
"findup-sync": "^0.3.0",
"flagged-respawn": "^0.3.1",
"rechoir": "^0.6.0",
"resolve": "^1.1.6"
}
liftoff has the following dependencies:
"dependencies": {
"extend": "^2.0.1",
"findup-sync": "^0.3.0",
"flagged-respawn": "^0.3.1",
"rechoir": "^0.6.0",
"resolve": "^1.1.6"
}
orchestrator requires the following dependencies:
"dependencies": {
"end-of-stream": "~0.1.5",
"sequencify": "~0.0.7",
"stream-consume": "~0.1.0"
},
...
In short... The bigger, more dependent module you install, the more dependencies are required. It's not always a bad thing. I recommend installing only what is needed to get the job you need done (sometimes it's a lot, sometimes not).
UPDATE
I just noticed that gulp was a dev-dependency... Moving on to elixir non-dev dependencies:
"dependencies": {
"babelify": "^7.2.0",
"browser-sync": "^2.7.10",
"browserify": "^11.2.0",
"del": "^1.2.0",
"glob": "^5.0.14",
"gulp-autoprefixer": "^2.3.1",
"gulp-babel": "^6.1.0",
"babel-preset-es2015": "^6.1.0",
"babel-preset-react": "^6.1.18",
"gulp-batch": "^1.0.5",
"gulp-coffee": "^2.3.1",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.0.0",
"gulp-if": "^1.2.5",
"gulp-less": "^3.0.3",
"gulp-load-plugins": "^1.0.0-rc.1",
"gulp-notify": "^2.2.0",
"gulp-phpspec": "^0.5.3",
"gulp-phpunit": "0.11.x",
"gulp-rename": "^1.2.2",
"gulp-rev": "^5.1.0",
"gulp-rev-replace": "^0.4.2",
"gulp-sass": "^2.0.3",
"gulp-sourcemaps": "^1.5.2",
"gulp-shell": "^0.5.0",
"gulp-uglify": "^1.4.2",
"gulp-util": "^3.0.6",
"gulp-watch": "^4.2.4",
"insert-css": "^0.2.0",
"merge-stream": "^0.1.8",
"parse-filepath": "^0.5.0",
"partialify": "^3.1.3",
"path": "^0.11.14",
"require-dir": "^0.3.0",
"run-sequence": "^1.1.1",
"underscore": "^1.8.3",
"underscore-deep-extend": "0.0.5",
"vinyl-buffer": "^1.0.0",
"vinyl-paths": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.2.3"
},
...