Why npm 3+ is not going to install these peer dependencies? - angularjs

I'm with npm version 2.15.5 . When doing an npm install command, npm is warning me about the fact that NPM3+ will no more install some dependencies..
The peer dependency reflect-metadata#0.1.2 included from angular2 will no
longer be automatically installed to fulfill the peerDependency
in npm 3+. Your application will need to depend on it explicitly.
There is surely a good reason for that but I can't get it.. I put all my hopes in my package manager to be able to install the dependencies... So why It will not be the case with the latest version?

Related

npm WARN #typescript-eslint/eslint-plugin#1.6.0 requires a peer of typescript#*

I am new to React and, starting with building an app, I came up with a problem while installing dependencies. I wanted to include packages like material-ui/core, material-ui/icons, react-reveal, react-scroll and react-slick.
While installing with this command:
npm install #material-ui/core #material-ui/icons react-reveal react-scroll react-slick
It showed that they've been installed, and when I started coding it didn't compile it.
That's when I came up with this error:
npm WARN #typescript-eslint/eslint-plugin#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN #typescript-eslint/parser#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN #typescript-eslint/typescript-estree#1.6.0 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN ts-pnp#1.1.2 requires a peer of typescript#* but none is installed. You must install peer dependencies yourself.
npm WARN tsutils#3.14.0 requires a peer of typescript#>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev but none is installed. You must install peer dependencies yourself.
What am I missing?
try this:
Delete 'package-lock.json' file
In the Terminal go to the folder with your project and type 'npm install --save typescript'
Then type 'npm install'
It helped me.
You can also resolve this issue by just installing typescript (it's clearly written in the debug output)
$ npm install typescript
You may also use other package-managers in favor of npm like pnpm or yarn.
Update:
You can also use an npm package that does this for you. Helpful when there are many peer dependencies.
The package is npm-install-peers. If you want slightly more control over these, you may want to check out install-peerdeps
Also, please do a further read on this StackOverflow answer.
While trying to reproduce the same error, on a Windows 10 machine with Node and npm installed, created an app with
npx create-react-app APP_NAME
If I run
npm start
the application will run just fine if I go to http://localhost:3000/
In order to fix the problem you're getting, I'd just install Typescript
npm install typescript
and that should suffice.
I will list every little bit of gory detail, just in case for some people it is helpful:
Remove package-lock.json (rm package-lock.json) if necessary
yarn add #material-ui/core #material-ui/icons react-reveal react-scroll react-slick
Read messages to make sure the dependencies were added. If you see any, then yarn add them as well.
Change into your node_modules directory (cd node_modules) then list to make sure all your packages and dependencies were installed (ls)
Check your App.js to make sure your import has the correct path (whether you really should have a ../ or not)
Go to the browser tab that is running localhost:3000
Refresh the page (For Chrome, it's the upper left clockwise arrow to the left of where you enter the URL)
add this in package.json:
"peerDependenciesMeta": {
"typescript": {
"optional": true
}
}

React Native dependencies

I want to start programming in React-native and have few problems:
-Whenever I run
npm install -g react-native
get this:
PS C:\Users\Name> npm install -g react-native
C:\Users\Name\AppData\Roaming\npm\react-native ->
C:\Users\Name\AppData\Roaming\npm\node_modules\react-native\local-
cli\wrong-react-native.js
npm WARN react-native#0.57.3 requires a peer of react#16.6.0-alpha.8af6728
but none is installed. You must install peer dependencies yourself.
npm WARN #babel/plugin-check-constants#7.0.0-beta.38 requires a peer of
#babel/core#7.0.0-beta.38 but none is installed. You must install peer
dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents#1.2.4
(node_modules\react-native\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for
fsevents#1.2.4: wanted {"os":"darwin","arch":"any"} (current:
{"os":"win32","arch":"x64"})
+ react-native#0.57.3
added 39 packages from 55 contributors, removed 20 packages and updated 82
packages in 32.884s
However, if I manually install these packages, they still don't register as installed and I am getting the same error messages.
-The second problem I come across is, with expo (I think).
I have followed the instructions of the react native manual on facebook's github, but whenever I try to install native-base package, always get the message unable to resolve module native-base.
I tried to follow the steps that should lead me to solving the problem of clearing watchman and deleting node_modules but nothing helped.
I also couldn't implement react-native-swiper because of the same problem.
Whenever I install them, get the dependencies Warnings but when I install the dependencies the warnings don't go away.
It seems that the packages don't get installed if I issue the command. I thought that could be the problem but haven't been able to find a resolution to that.
react-native should not be installed as global. It should be installed in your project directory.
I think that instead of react-native you meant to install react-native-cli
which gives you cli options for building React-Native apps such as react-native init to start a project etc.
By using the react-native-cli module, using the native-base module becomes much easier as after doing npm i -S native-base you have to just run react-native link as written in the documentation.
Try delete your node_modules folder and re-install
npm i
You can also try clean npm cache.
Edit - better way will be install create-react-native-app, that should works outside the box.
https://github.com/react-community/create-react-native-app
Try to install it with this command npm install -g react-native-cli or with the sudo sudo npm install -g react-native-cli. Make sure you have installed the npm and node in your device

Installing material-ui showing warning: $ npm install #material-ui/core npm WARN ajv-keywords#3.2.0 requires a peer of ajv#^6.0.0

I am installing material-ui: npm install #material-ui/core (which is the latest version) for React.
I got the latest npm version (npm i -g npm, which is now + npm#6.1.0).
And I also have tried: npm install --save material-ui.
But it always keeps showing me this:
$ npm install #material-ui/core
npm WARN ajv-keywords#3.2.0 requires a peer of ajv#^6.0.0 but none is installed. You must install peer dependencies yourself.
#material-ui/core#1.2.1
updated 1 package and audited 14597 packages in 8.235s
found 0 vulnerabilities.
I don't know if this is a material-ui latest version problem? or it is the latest npm problem? So, how do I proceed to install the material-ui for React?
You need to install ajv#^6.0.0
npm install -S ajv#^6.0.0
Edit: to add to this, as described in this post, it seems that npm removed the automatic installation of peer dependencies on npm 3, but if you'd like that to be taken care of automatically, you can use npm-install-peers

Successful yeoman generator install can't be found when running yo?

Currently failing to learn how to use terminal as a development tool.
Trying to set up the MEAN stack by using yeoman to scaffold the project. However, when I run npm install -g generator-angular-fullstack it installs successfully here (/Users/xxxx/npm/lib/node_modules) and then when I run yo angular-fullstack it says I haven't got that generator.
I have two generators installed already but the new generator (angular-fullstack) isn't adding to the list even though the global install was successful:
mean
meanjs
This might be irrelevant but when I try and uninstall these generators I get this message - npm WARN uninstall not installed in /Users/xxxx/npm/lib/node_modules
What I'm trying to do is:
1. install the angular-fullstack generator
2. scaffold a project using angular-fullstack
I've tried uninstalling yeoman, npm, clearing npm cache and all sorts of things but I can't get it to work. I've been working on this on and off for about 3 weeks now and all I want to do is get a mean project structure set up and running. So if anyone can help that'd be great.
Being a rookie I didn't want to resort to Stack Overflow, but I'll take the abuse now. ;)
Thanks in advance.
UPDATE: Tried to install a different generator (angular) and can't access this either. This is the message I get when installing.
~:TestMVCApp xxxx$ npm install -g generator-angular
npm WARN peerDependencies The peer dependency generator-karma#>=0.9.0 included from generator-angular will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN deprecated CSSselect#0.4.1: the module is now available as 'css-select'
npm WARN deprecated CSSwhat#0.4.7: the module is now available as 'css-what'
npm WARN peerDependencies The peer dependency yo#>=1.0.0 included from generator-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
generator-karma#1.0.0 /Users/xxxx/npm/lib/node_modules/generator-karma
├── sorted-object#1.0.0
├── underscore#1.8.3
└── yeoman-generator#0.19.2 (detect-conflict#1.0.0, read-chunk#1.0.1, diff#1.4.0, yeoman-welcome#1.0.1, xdg-basedir#1.0.1, user-home#1.1.1, rimraf#2.4.3, async#0.9.2, mime#1.3.4, text-table#0.2.0, class-extend#0.1.2, dargs#4.0.1, shelljs#0.4.0, debug#2.2.0, nopt#3.0.4, istextorbinary#1.0.2, cross-spawn#0.2.9, mkdirp#0.5.1, chalk#1.1.1, yeoman-assert#1.0.0, cli-table#0.3.1, run-async#0.1.0, mem-fs-editor#1.2.3, through2#0.6.5, underscore.string#3.2.2, glob#5.0.15, findup-sync#0.2.1, yeoman-environment#1.2.7, sinon#1.17.1, github-username#1.1.1, dateformat#1.0.11, pretty-bytes#1.0.4, gruntfile-editor#1.0.0, lodash#3.10.1, inquirer#0.8.5, html-wiring#1.2.0, download#4.4.0)
generator-angular#0.12.1 /Users/xxxx/npm/lib/node_modules/generator-angular
├── chalk#1.1.1 (escape-string-regexp#1.0.3, ansi-styles#2.1.0, supports-color#2.0.0, strip-ansi#3.0.0, has-ansi#2.0.0)
├── yosay#1.0.5 (ansi-regex#1.1.1, ansi-styles#2.1.0, word-wrap#1.1.0, strip-ansi#2.0.1, pad-component#0.0.1, minimist#1.2.0, taketalk#1.0.0, string-width#1.0.1, repeating#1.1.3)
├── wiredep#2.2.2 (propprop#0.3.0, minimist#1.2.0, lodash#2.4.2, chalk#0.5.1, through2#0.6.5, glob#4.5.3, bower-config#0.5.2)
└── yeoman-generator#0.16.0 (diff#1.0.8, dargs#0.1.0, isbinaryfile#2.0.4, debug#0.7.4, async#0.2.10, mime#1.2.11, rimraf#2.2.8, findup-sync#0.1.3, text-table#0.2.0, mkdirp#0.3.5, lodash#2.4.2, iconv-lite#0.2.11, underscore.string#2.3.3, shelljs#0.2.6, class-extend#0.1.2, chalk#0.4.0, glob#3.2.11, file-utils#0.1.5, cheerio#0.13.1, request#2.30.0, inquirer#0.4.1, download#0.1.19)
First, you'll need to install globally yeoman and these required tools:
npm install -g yo bower grunt-cli gulp

Yeoman and Bower not adding Bootstrap CSS (AngularJS generator)

I am following along a codelab on the Yeoman webpage, and so far I've managed to follow along (with a few major hiccups getting my development environment going, but now it doesn't return any errors).
So I made my project folder and ran yo, selected AngularJS and run the thing. Fairly soon into the process I got a prompt ? Overwrite package.json? I answered with y and got the following warnings:
npm WARN package.json codelab#0.0.0 No license field.
npm WARN peerDependencies The peer dependency karma#>=0.9 included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency jasmine-core#* included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma#>=0.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency phantomjs#>=1.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma#~0.12.0 included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN optional dep failed, continuing fsevents#0.3.6
After that, it finished what it was doing, so I ran bower install again just to be sure (because of the package.json thing), and then grunt serve. Now grunt says done, without errors, but my page only loads main.css. I have a strong feeling the bootstrap.css file is missing. This is what it looks like, when the codelab instructions say it should look like this.
If you need further information on what was generated, here's a GitHub repository link.
Any insight on what I'm doing wrong (if anything) is welcome.
After doing the codelab I had exactly the same problem with the same result as you are getting (warnings and all). I had to just work around the issue by rolling back to Bootstrap 3.3.4.
Just edit bower.json and change the Bootstrap line to:
"bootstrap": "3.3.4",
Then run the following and it should work:
bower install
grunt serve
It didn't work for me either. I got a solution from here:
https://github.com/twbs/bootstrap/issues/16663
We fixed this issue temporary by overriding our project bower.json. For us it works fine, but we are waiting for some solution from Bootstrap.
"overrides":{
"bootstrap" : {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
If you stick to a shell, you can just type:
bower install --save bootstrap#3.3.4
grunt serve
That will ensure that Twitter Bootstrap gets downgraded to a more Bower/yo-angular friendly version and save it as a dev dependency. Grunt will then run 'wiredep' during its 'serve' task and append the bootstrap.css in your project's index.html.
In the bower.json file, the dependency version of Bootstrap is set as:
"bootstrap": "^3.2.0",
By default, that means install the latest version higher than 3.2.0.
As a result, the latest version 3.3.5 is installed and that breaks.
So, remove the ^ sign and replace:
"bootstrap": "^3.2.0",
with:
"bootstrap": "3.3.4",
It is not ideal, but I rolled back to Bootstrap version 3.3.4 and setting up like this:
bower install --save bootstrap#3.3.4
bower_concat: {
all: {
dest: {
'js': 'path/to/file/_bower.js',
'css': 'path/to/file/_bower.css'
}
}
}

Resources