Is it OK to ignore missing NPM (peer) dependencies?

user_3249281 0
Viewed 8959

Trying to play around with reactjs, and I have very limited familiarity with npm.

I ran:

npx create-react-app my-app

Installing template dependencies using npm...
npm WARN react-scripts@3.4.1 requires a peer of typescript@^3.2.1 but none is installed. 
You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of node-sass@^4.0.0 but none is installed. 
You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of sass@^1.3.0 but none is installed. 
You must install peer dependencies yourself.
npm WARN sass-loader@8.0.2 requires a peer of fibers@>= 3.1.0 but none is installed. 
You must install peer dependencies yourself.
npm WARN tsutils@3.17.1 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 || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. 
You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

> added 1606 packages from 750 contributors and audited 931160 packages
> in 165.13s

reactjs is an extremely popular framework.
Is it normal to have missing dependencies out of the box with a fresh install?

I've seen somewhere that I can manually add what is missing with npm install --save-dev xxxxx.

Here's what is returned as I ran the following:

npm ls

    npm ERR! peer dep missing: typescript@^3.2.1, required by react-scripts@3.4.1
    npm ERR! peer dep missing: node-sass@^4.0.0, required by sass-loader@8.0.2
    npm ERR! peer dep missing: sass@^1.3.0, required by sass-loader@8.0.2
    npm ERR! peer dep missing: fibers@>= 3.1.0, required by sass-loader@8.0.2
    npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev |
    | >= 3.7.0-beta, required by tsutils@3.17.1
    npm ERR! peer dep missing: typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev |
    | >= 3.7.0-beta, required by tsutils@3.17.1
    npm ERR! missing: mkdirp@0.5.3, required by node-pre-gyp@0.14.0
    npm ERR! missing: minimist@1.2.5, required by mkdirp@0.5.3
    npm ERR! missing: npm-normalize-package-bin@1.0.1, required by npm-packlist@1.4.8
    npm ERR! missing: npm-normalize-package-bin@1.0.1, required by npm-bundled@1.1.1
    npm ERR! missing: safe-buffer@5.1.2, required by readable-stream@2.3.7
    npm ERR! missing: safe-buffer@5.1.2, required by string_decoder@1.1.1
    npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
    npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
    npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
    npm ERR! missing: minimist@1.2.5, required by rc@1.2.8
    npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
    npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
    npm ERR! missing: minipass@2.9.0, required by tar@4.4.13
    npm ERR! missing: mkdirp@0.5.3, required by tar@4.4.13
    npm ERR! missing: safe-buffer@5.1.2, required by tar@4.4.13
    npm ERR! missing: yallist@3.1.1, required by tar@4.4.13
    npm ERR! missing: minipass@2.9.0, required by fs-minipass@1.2.7
    npm ERR! missing: safe-buffer@5.1.2, required by minipass@2.9.0
    npm ERR! missing: yallist@3.1.1, required by minipass@2.9.0
    npm ERR! missing: minipass@2.9.0, required by minizlib@1.3.3
    npm ERR! missing: mkdirp@0.5.3, required by node-pre-gyp@0.14.0
    npm ERR! missing: minimist@1.2.5, required by mkdirp@0.5.3
    npm ERR! missing: console-control-strings@1.1.0, required by npmlog@4.1.2
    npm ERR! missing: inherits@2.0.4, required by readable-stream@2.3.7
    npm ERR! missing: safe-buffer@5.1.2, required by readable-stream@2.3.7
    npm ERR! missing: safe-buffer@5.1.2, required by string_decoder@1.1.1
    npm ERR! missing: console-control-strings@1.1.0, required by gauge@2.7.4
    npm ERR! missing: string-width@1.0.2, required by gauge@2.7.4
    npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
    npm ERR! missing: code-point-at@1.1.0, required by string-width@1.0.2
    npm ERR! missing: is-fullwidth-code-point@1.0.0, required by string-width@1.0.2
    npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
    npm ERR! missing: number-is-nan@1.0.1, required by is-fullwidth-code-point@1.0.0
    npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
    npm ERR! missing: string-width@1.0.2, required by wide-align@1.1.3
    npm ERR! missing: minimist@1.2.5, required by rc@1.2.8
    npm ERR! missing: inherits@2.0.4, required by glob@7.1.6
    npm ERR! missing: once@1.4.0, required by glob@7.1.6
    npm ERR! missing: once@1.4.0, required by inflight@1.0.6
    npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
    npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
    npm ERR! missing: minipass@2.9.0, required by tar@4.4.13
    npm ERR! missing: mkdirp@0.5.3, required by tar@4.4.13
    npm ERR! missing: safe-buffer@5.1.2, required by tar@4.4.13
    npm ERR! missing: yallist@3.1.1, required by tar@4.4.13
    npm ERR! missing: minipass@2.9.0, required by fs-minipass@1.2.7
    npm ERR! missing: safe-buffer@5.1.2, required by minipass@2.9.0
    npm ERR! missing: yallist@3.1.1, required by minipass@2.9.0
    npm ERR! missing: minipass@2.9.0, required by minizlib@1.3.3
    npm ERR! missing: safe-buffer@5.1.2, required by readable-stream@2.3.7
    npm ERR! missing: safe-buffer@5.1.2, required by string_decoder@1.1.1
    npm ERR! missing: strip-ansi@3.0.1, required by gauge@2.7.4
    npm ERR! missing: strip-ansi@3.0.1, required by string-width@1.0.2
    npm ERR! missing: ansi-regex@2.1.1, required by strip-ansi@3.0.1
    npm ERR! missing: wrappy@1.0.2, required by inflight@1.0.6
    npm ERR! missing: wrappy@1.0.2, required by once@1.4.0
    npm ERR! missing: safe-buffer@5.1.2, required by tar@4.4.13
    npm ERR! missing: yallist@3.1.1, required by tar@4.4.13
    npm ERR! missing: safe-buffer@5.1.2, required by minipass@2.9.0
    npm ERR! missing: yallist@3.1.1, required by minipass@2.9.0

So, am i missing the roughly 5 or so that were displayed at the end of the react setup/install, or am i missing the ~30-50 or so that npm ls indicates?

If i npm start the project, it seems to run just fine.
Do I even need all these missing dependencies?
How in the world can you keep track of what is needed -vs- not?
And how do you know when you run into a problem from something missing?

I've tried installing some of the dependencies,
but they just depend on more dependencies that are missing.
It seems like a never ending game of chasing your tail.

How can i trust that everything is in order?
If i just say screw it and keep trying to install 50+ modules (and all of their dependencies), is it just going to work? I'm feeling very overwhelmed and I haven't even written one piece of code yet.

thanks!

Edit/Update:

Upgraded from v10.15.3 -> v12.16.2 (had installed the old version years ago to play with react native). Deleted my prior project folder and recreated the react project. Every missing dependency went away except for:

npm WARN tsutils@3.17.1 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 || >= 3.6.0-beta |
| >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

running "npm ls" also only shows typescript as the only thing missing. so, i'm happy to see that match what the react install process reported.

that leaves me with the following questions.

1) does Node/NPM come with "default" packages installed? I dont see how having an older version of Node when I didn't install anything extra myself would suddenly make available all of the modules that were previously missing? Especially when they are all 3rd party and that's the whole point of npm (being able to manage 3rd party packages/modules). how could i prevent this from happening again (do i always have to update node immediately when new versions come out?)

2) i tried to install typescript as both:

npm install -g typescript --save-dev
npm install typescript --save-dev

but neither got the warning to go away

I had to do: 

npm install typescript

which finally got the warnings to go away. but that added typescript to my depenencies directly in my package.json. does that mean the typescript library would be included in my final project that gets exported to upload to my website? obviously i dont want extra files being in there (typescript alone is like 50MB).

Thanks!

npm reactjs
1 Answers

Reactjs is an extremely popular framework.

Is it normal to have missing dependencies out of the box with a fresh install?

Yes, it's absolutely normal.
And this should not even deter your progress to learn react.
Actually this dependency scenario is more of an npm issue, because starting with npm v3.0, peer-dependencies are not automatically installed on npm install.

I can manually add what is missing with npm install --save-dev xxxxx.

Yes, but that will be an ongoing battle.
There are quite a number of packages developed to wholly install peer dependencies, better look into using a package if you must install those peer dependencies.

If I ran npm start the project runs just fine.
Do I even need all these missing dependencies?
How in the world can you keep track of what is needed -vs- not?
And how do you know when you run into a problem from something missing?

No, you don't entirely need them and that's why the project runs fine.

In fact, let me give you some insight into the reactjs scenario.
To relive you of the npm dependency pain that's why the React team innovated
the create-react-app which makes starting react development quite easy and fast.

So when you run npx create-react-app my-app to kick-start a react project,
in the background it depends on a major package called react-scripts.
In fact, notice that when you run npm start, it invokes react-scripts start.

Many of those peer dependencies are required by the dependencies of react-scripts.
You'll see this if you inspect ./node_modules/react-scripts/package.json

I've tried installing some of the dependencies,
but they just depend on more dependencies that are missing.
It seems like a never ending game of chasing your tail.
How can i trust that everything is in order?
If i just say screw it and keep trying to install 50+ modules (and all of their dependencies), is it just going to work?

Don't go there! That's the reason react recommends the create-react-app,
it will install the must-have dependencies.
Once your project deems a certain package a must-have, npm start will fail.
At that point, you can then run npm i --save @package or npm --save-dev @package

Note:
Replace @package with the package required by your project.
And notice the "i" which works as short for "install"

user_108494380
Related