I'm trying to build a repository/package for my personal ESLint config files. I have all of my configuration files built the way I would like, and now I am trying to install this package to test it.
In this scenario, I have two packages:
#me/eslint-config is the package containing my ESLint config files.
test-package is the package on/in which I am trying to install #me/eslint-config.
When I try to install the #me/eslint-config package, peer dependencies are not installed, nor are they even mentioned during the installation.
Both packages currently only reside locally on my machine, side-by-side, in the same directory:
<parent_dir>:
- eslint-config
- package.json
- ...
- test-package
- package.json
- ...
The package.json file for #me/eslint-config looks as follows:
{
...
"dependencies": {
"#typescript-eslint/parser": "5.29.0"
},
"peerDependencies": {
"eslint": "8.18.0",
"eslint-plugin-import": "2.26.0",
"eslint-plugin-jsdoc": "39.3.3",
"eslint-plugin-prefer-arrow": "1.2.3",
"#typescript-eslint/eslint-plugin": "5.29.0"
}
...
}
I am installing this package in test-package as follows:
$> cd /path/to/test-package
$> npm i ../eslint-config --save-dev
NPM properly installs all other dependencies, including the #me/eslint-config package itself, but does not install the peerDependencies of #me/eslint-config.
This is using NPM v8.1.0.
This article seems to suggest that NPM >7 installs peer dependencies automatically. This is obviously not working for me.
Things I have already tried that have not fixed the problem:
Deleting node_modules/ and package-lock.json from test-package and reinstalling everything.
Pinning all peerDependencies versions in #me/eslint-config.
Adding all peerDependencies in #me/eslint-config as both dependencies and peerDependencies in #me/eslint-config.
tl;dr NPM isn't installing peerDependencies
I had the same error on former version of npm and as you mention, npm ^8 now install peer dependencies.
But here could be ways of fining your problem
1 : estlint is a devDependencies (A guess)
eslint should be devDependencies and not a peerDependencies.
Maybe npm doesn't accept you to install it then.
I search a bit but couldn't find any real thread discussing about this
That said, I wouldn't install it as dependencies since it will be pushed to your production build, what, I think, you do not want.
2 : Being up to date
Try it with the latest version of npm
download the latest version of npm : npm install -g npm#latest
Delet node_modules/ and package-lock.json from test-package and reinstall everything. as you did already
2 : allowJs
If eslint is an js package & you see it being installed in the node_modules folder.
Inside the tsconfig.json file, under the compilerOptions add allowJs: true and set strict: false
"compilerOptions": {
"allowJs": true,
"strict": false,
Close all your instance of vs-code
Restart & retry (No need to remove the package-lock or so)
Assume I have legacy codebase working with some old packages:
"mobx": "5.15.4",
"mobx-react": "6.1.8",
While developing some new experimental feature, I wanna use newer versions of these packages, but also have to leave legacy in a working state. So, I'm aliasing newer versions of packages so I can use them alongside with the old ones:
"#new/mobx": "npm:mobx#^6.3.13"
"#new/mobx-react": "npm:mobx-react#^7.2.1"
But mobx-react using mobx as a peer dependency. Obviously, the problem is that #new/mobx-react is watching old mobx version and expectedly says that there should be mobx of version 6+.
Is there any way to manually resolve peer dependency of #new/mobx-react, so it will watch #new/mobx and not just mobx? Or, maybe there is a way to implicitly install peer deps for #new/mobx-react in a way it will not override old mobx version?
You can easily do that
set NODE_ENV=development
npm install mobx#5.15.4 --save
npm install mobx-react#6.1.8 --save
npm install #new/mobx#npm:mobx#^6.3.13 --save
npm install #new/mobx-react#npm:mobx-react#^7.2.1 --save
then you must manually install dependencies for your #new/mobx-react like as follows:
cd ./node_modules/#new/mobx-react
npm install --ignore-scripts
that will lead to mobx of version 6.3.14 be in node_modules of your #new/mobx-react
node.js (starting from npm version 3) at first tries to load dependency from internal node_modules of package, then from node_modules of project see : documentation
I'm getting the following error from a few different libraries in my project, after adding the "stage-2" preset to my .babelrc. (Thats my assumption atm)
e.g. from the DatePicker class in React Native:
node_modules/react-native/Libraries/Components/DatePickerAndroid/DatePickerAndroid.android.js: You gave us a visitor for the node type "ForAwaitStatement" but it's not a valid type
How can I resolve this error?
I'm using React Native 0.31 and
"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"babel-preset-stage-2": "^6.17.0"
},
I too ran into this. Solved by updating my babel-core version by changing the entry in package.json to the latest (at the time of this writing)
// package.json
...
"babel-core": "6.17.0",
...
then running
rm -r node_modules/babel* && npm i
I had the same issue after updating babel-core and some babel plugins. In my case it was fixed by updating babel-cli (globally installed with npm), which was a few versions behind and not using the right babel-core version.
I encountered this after an npm update, struggled for several hours to find a fix, but ultimately solved it via rm -rf node_modules && npm install. I hate npm.
I found this issue is caused by a lower version babel-types, so the solution is just:
npm install babel-types
or a clean npm install:
git clean -fdx
npm install
If your babel-cli is out of date, you might get the same error. Try updateing babel-cli using npm install babel-cli -g or update your local babel-cli and reference it in your package.json scripts.
Also do npm i -D babel-plugin-transform-runtime and add "plugins": ["transform-runtime"] to your .babelrc
Had a similar situation as #Thomas; a globally installed version of babel-cli which was behind. I can recommend not installing it globally, instead running babel through npm scripts.
Local install:
npm install babel-cli --save-dev
In your npm scripts:
"babel": "babel script.js"
Recently I started Angular 2 tutorial at https://angular.io/docs/ts/latest/tutorial/.
and left off with Angular 2 beta 8.
Now I resumed the tutorial and latest beta is beta 14.
If I simply do npm update a few modules (preloaded with the tutorial) are updated but not Angular2 (I can see that with npm ls).
If I do npm update angular 2 or npm update angular2#2.0.0beta.14 it just does nothing either.
The command npm update -D && npm update -S will update all packages inside package.json to their latest version, according to their defined version range. You can read more about it here.
If you want to update Angular from a version prior to 2.0.0-rc.1, then you'll need to manually edit package.json, as Angular was split into several npm modules. Without this, as angular2 package points to 2.0.0-beta.21, you'll never get to use the latest version of Angular.
A list with some of the most common modules that you'll need to get started can be found in the quickstart repository.
Notes:
A cool way to stay up to date with your packages' latest version is to use npm outdated which shows you all outdated packages together with their wanted and latest version.
The reason why we need to chain two commands, npm update -D and npm update -S is to overcome this bug until it's fixed.
Another nice package which I used for migrating form a beta version of Angular2 to Angular2 2.0.0 final is npm-check-updates
It shows the latest available version of all packages specified within your package.json. In contrast to npm outdated it is also capable to edit your package.json, enabling you to do a npm upgrade later.
Install
sudo npm install -g npm-check-updates
Usage
ncufor display
ncu -u for re-writing your package.json
Upgrade to latest Angular 5
Angular Dep packages:
npm install #angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router}#latest --save
Other packages that are installed by the angular cli
npm install --save core-js#latest rxjs#latest zone.js#latest
Angular Dev packages:
npm install --save-dev #angular/{compiler-cli,cli,language-service}#latest
Types Dev packages:
npm install --save-dev #types/{jasmine,jasminewd2,node}#latest
Other packages that are installed as dev dev by the angular cli:
npm install --save-dev codelyzer#latest jasmine-core#latest jasmine-spec-reporter#latest karma#latest karma-chrome-launcher#latest karma-cli#latest karma-coverage-istanbul-reporter#latest karma-jasmine#latest karma-jasmine-html-reporter#latest protractor#latest ts-node#latest tslint#latest
Install the latest supported version used by the Angular cli (don't do #latest):
npm install --save-dev typescript#2.4.2
Rename file angular-cli.json to .angular-cli.json and update the content:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "project3-example"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
UPDATE:
Starting from CLI v6 you can just run ng update in order to get your dependencies updated automatically to a new version.
With ng update sometimes you might want to add --force flag.
If you do so make sure that the version of typescript you got
installed this way is supported by your current angular version,
otherwise you might need to downgrade the typescript version.
Also checkout this guide Updating your Angular projects
For bash users only
If you are on are on Mac/Linux or running bash on Windows(that wont work in default Windows CMD) you can run that oneliner:
npm install #angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}#4.4.5 --save
yarn add #angular/{animations,common,compiler,core,forms,http,platform-browser,platform-browser-dynamic,router,compiler-cli}#4.4.5
Just specify version you wan't e.g #4.4.5 or put #latest to get the latest
Check your package.json just to
make sure you are updating all #angular/* packages that you app is relying on
To see exact #angular version in your project run:
npm ls #angular/compiler or yarn list #angular/compiler
To check the latest stable #angular version available on npm run:
npm show #angular/compiler version
Official npm page suggest a structured method to update angular version for both global and local scenarios.
1.First of all, you need to uninstall the current angular from your
system.
npm uninstall -g angular-cli
npm uninstall --save-dev angular-cli
npm uninstall -g #angular/cli
2.Clean up the cache
npm cache clean
EDIT
As pointed out by #candidj
npm cache clean is renamed as npm cache verify from npm 5 onwards
3.Install angular globally
npm install -g #angular/cli#latest
4.Local project setup if you have one
rm -rf node_modules
npm install --save-dev #angular/cli#latest
npm install
Please check the same down on the link below:
https://www.npmjs.com/package/#angular/cli#updating-angular-cli
This will solve the problem.
Alternative approach using npm-upgrade:
npm i -g npm-upgrade
Go to your project folder
npm-upgrade check
It will ask you if you wish to upgrade the package, select Yes
That's simple
If you want to install/upgrade all packages to the latest version and you are running windows you can use this in powershell.exe:
foreach($package in #("animations","common","compiler","core","forms","http","platform-browser","platform-browser-dynamic","router")) {
npm install #angular/$package#latest -E
}
If you also use the cli, you can do this:
foreach($package in #('animations','common','compiler','core','forms','http','platform-browser','platform-browser-dynamic','router', 'cli','compiler-cli')){
iex "npm install #angular/$package#latest -E $(If($('cli','compiler-cli').Contains($package)){'-D'})";
}
This will save the packages exact (-E), and the cli packages in devDependencies (-D)
Just start here:
https://update.angular.io
Select the version you're using and it will give you a step by step guide.
I recommend choosing 'Advanced' to see all steps. Complexity is a relative concept - and I don't know whose stupid idea this feature was, but if you select 'Basic' it won't show you all steps needed and you may miss something important that your otherwise 'Basic' application is using.
As of version 6 there is a new Angular CLI command ng update which intelligently goes through your dependencies and performs checks to make sure you're updating the right things :-)
The steps will outline how to use it :-)
npm uninstall --save-dev angular-cli
npm install --save-dev #angular/cli#latest
ng update #angular/cli
ng update #angular/core --force
ng update #angular/material or npm i #angular/cdk#6
#angular/material#6 --save
npm install typescript#'>=2.7.0 <2.8.0'
Best way to do is use the extension(pflannery.vscode-versionlens) in vscode.
this checks for all satisfy and checks for best fit.
i had lot of issues with updating and keeping my app functioining unitll i let verbose lense did the check and then i run
npm i
to install newly suggested dependencies.
If you are looking like me for just updating your project to the latest these is what works form me since Angular 6:
Open the console on your project folder: If you type: ng update then you will get the below message:
We analyzed your package.json, there are some packages to update:
Name Version Command to update
--------------------------------------------------------------------------------
#angular/cli 7.0.7 -> 7.2.2 ng update #angular/cli
#angular/core 7.0.4 -> 7.2.1 ng update #angular/core
There might be additional packages that are outdated.
Run "ng update --all" to try to update all at the same time.
So I usually go straight and do:
ng update --all
Finally you can check your new version:
ng version
Angular CLI: 7.2.2
Node: 8.12.0
OS: win32 x64
Angular: 7.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router
Package Version
-----------------------------------------------------------
#angular-devkit/architect 0.12.2
#angular-devkit/build-angular 0.12.2
#angular-devkit/build-optimizer 0.12.2
#angular-devkit/build-webpack 0.12.2
#angular-devkit/core 7.2.2
#angular-devkit/schematics 7.2.2
#angular/cli 7.2.2
#ngtools/webpack 7.2.2
#schematics/angular 7.2.2
#schematics/update 0.12.2
rxjs 6.3.3
typescript 3.2.4
webpack 4.28.4
I'm building a grunt javascript project with grunt, and I have a package.json file that looks something like:
{
... name, author, etc here ...
"dependencies": {
"grunt-html":"0.2.1"
}
}
I can run npm install to install grunt-html and this works just fine. But when I add new dependencies, all developers on the team must know to run npm install again. Is there a way to automatically install any packages that have not yet been installed? Should I just run npm install always to ensure I'm up to date?
Yes npm install is the easiest way IMO. Getting everyone familiar with the other npm commands makes managing deps easier as well. Such as:
npm ls to list out the currently installed modules.
Or the --save flag ie, npm install grunt-html --save to install and insert the package and version into your package.json.
npm prune to remove modules not included in your package.json.
Other ways to manage dependencies are to commit the node_modules folder in your repository to avoid other devs from having to run npm install. Or for more complex projects consider using npm shrinkwrap to lock down dependencies to specific versions: npm shrinkwrap docs.
I have not tried grunt-install-dependencies (https://github.com/ahutchings/grunt-install-dependencies), but it seems this may fullfill your needs. Just add the command install-dependencies as first task within your custom definfed grunt tasts, e.g.
grunt.registerTask('build', [ 'install-dependencies', 'useminPrepare', ... ]);