Anybody knows why I am still having a missing dependency error, even though it clearly shows the correct version of webpack is already installed below??
When I ran npm start :
'''
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"webpack": "4.41.5"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
When I run npm ls webpack, it gives me :
Chelseas-MacBook-Pro:website-expo-2018-master ipchelsea$ npm ls webpack
uwbce#0.1.0 /Users/ipchelsea/Desktop/website-expo-2018-master
├─┬ react-loading-screen#0.0.17
│ └── webpack#2.7.0
├─┬ react-scripts#3.4.0
│ └── webpack#4.41.5
└── webpack#4.41.6
You missed out the steps you took to get here. You did something, or missed something out in the steps you did to end up where you are now.
You should delete node_modules, then do npm i, and see if that correctly installs the packages.
Also, add the contents of your package.json file to the question. You need to have one in the root of this project.
Related
I had no good idea on how to word this, but let me try to show an example and explain.
taking a look at the json5 dep used in our app via npm ls json5 you will see 2 different verions of 2.2.1 and 1.0.1
├─┬ #babel/core#7.20.5
│ └── json5#2.2.1
├─┬ babel-loader#8.3.0
│ └─┬ loader-utils#2.0.4
│ └── json5#2.2.1 deduped
└─┬ eslint-plugin-import#2.26.0
└─┬ tsconfig-paths#3.14.1
└── json5#1.0.1
Now my question relates to how npm installs and knows which version to use for which dependency (no matter how deep) and where are the located.
For example on my where are the located. part of my question.
When i search my root node_modules folder, and look for eslint-plugin-import dep, i find a node-modules within it but it only 3 things, I thought i would find another folder that is labeled tsconfig-path and inside that, find another node_modules folder that contains json5#1.0.1. But i dont, the only thing i do find is my root node_modules folder contains all three, eslint-plugin-import, tsconfig-paths, and json5.
I also noticed, that even thought this dep tree shows version 1.0.1 and 2.2.1 for json5, my root node_modules folder is the 2.2.1 version.
So that makes me wonder, where is the 1.0.1 version located, and how does it keep track of these different verions for these dep trees to know which one to us since i couldnt even find the 1.0.1 version physically anywhere. I guess i need a better understanding on how npm works and how the npm ecosystem for dependencies.
Sorry for long explanation, its just hard for me to rely my thoughts in a shorter summary.
I feel like this is useless as my conundrum has been discussed in several different threads, but nothing has worked.
I have an ExpressJS/node server deployed to AWS Elastic Beanstalk. When I first tried to deploy several weeks ago, I couldn't get it running until I finally realized one of my many dependencies (an amazing image resizing tool called Sharp) was breaking it. I uninstalled it and removed its usage in the server. Everything was fine. But I really need it--it works beautifully when I run the server on my local device.
But when I reinstall and deploy, I get this error:
npm ERR! path /var/app/staging/node_modules/sharp
npm ERR! command failed
npm ERR! command sh -c (node install/libvips && node install/dll-copy && prebuild-install) || (node install/can-compile && node-gyp rebuild && node install/dll-copy)
npm ERR! sharp: Are you trying to install as a root or sudo user? Try again with the --unsafe-perm flag
npm ERR! sharp: Please see https://sharp.pixelplumbing.com/install for required dependencies
npm ERR! sharp: Installation error: EACCES: permission denied, mkdir '/root/.npm'
The majority of answers on the web are to set unsafe-perm=true, as an environment variable, in a file named .npmrc, using a .config file in .ebextensions that gives write permissions to root... Googling anything pertaining to Sharp and Elastic Beanstalk, or my specific errors brings up an endless sea of purple links to me. But nothing has worked.
EDIT: Rather than continuing to fight to get Sharp working, I found an alternative tool called Jimp. Might be less robust than Sharp, but I really just need resizing, and it does that, so if anyone else is pulling their hair out over this issue, consider saving yourself the headache, and go with Jimp.
Please reference my "workaround" solution provided in the following GitHub Issue (Fails to install on AWS ElasticBeanstalk with node16 #3221) for a full explanation.
Solution:
Create the following Platform Hooks paths in the root directory of your application bundle.
.platform/hooks/prebuild
.platform/confighooks/prebuild
Create the following bash script (00_npm_install.sh) with execute permissions (chmod +x).
#!/bin/bash
cd /var/app/staging
sudo -u webapp npm install sharp
Validate the Application Bundle Structure.
Ex. Sample project structure:
~/my-app/
├── app.js
├── index.html
├── .npmrc_bkp
├── package.json
├── package-lock.json
├── .platform
│ ├── confighooks
│ │ └── prebuild
│ │ └── 00_npm_install.sh
│ └── hooks
│ └── prebuild
│ └── 00_npm_install.sh
└── Procfile
Deploy the Application!
Hope it helps!
I have a nextjs app which has "next": "^10.2.0". It in turn has shell-quote as a transitive dependency and the version installed in 1.7.2 which has some critical security vulnerabilities. I have to fix this for now, and shell-quote version 1.7.3 does not have these vulnerabilities. So I added this
"preinstall": "npx npm-force-resolutions"
and
"resolutions": {
"shell-quote": ">=1.7.3"
}
in package.json.
But it still gives me the error and when I check npm ls shell-quote, I see that
├─┬ #storybook/react#6.4.9
│ └─┬ react-dev-utils#11.0.4
│ └── shell-quote#1.7.2
└─┬ next#10.2.3
└─┬ #next/react-dev-overlay#10.2.3
└── shell-quote#1.7.2 deduped
Does this mean, next#10.2.3 cannot have shell quote of 1.7.2? Can this issue be fixed for now without a nextjs upgrade?
You don't need to use resolutions as you are not changing the package but only the version of it. Override is fine here. So, add following code block to the package.json
"overrides": {
"react-dev-utils#11.0.4": {
"shell-quote": "1.7.3"
},
"#next/react-dev-overlay#10.2.3": {
"shell-quote": "1.7.3"
}
},
Now remove node_modules with rm -rf node_modules. Then, you have two options:
Remove package-lock.json completely. This way, you'll lose locked versions for your other packages too.
Or, open package-lock.json and remove all entries with react-dev-utils, node_modules/react-dev-utils, #next/react-dev-overlay, node_modules/react-dev-overlay, shell-quote and node_modules/shell-quote. This way, you'll keep locked versions for other packages.
And run npm install, when you run npm list shell-quote, you'll see all packages uses it with v1.7.3.
Since npm install will edit your package-lock.json for this change, you will have complete packge-lock.json and won't have to edit it next time you run npm install.
I've been editing our repository to get rid of vulnerabilities in this way and it works fine. I've used this answer from another SO question.
Of course, you have to make sure that these versions are compatible with each other. Because with overrides, npm does not do any checking for the versions, you force it. For example, you have to make sure that react-dev-utils#11.0.4 can work with shell-quote#1.7.3. In minor version upgrades, libraries generally work as the same before but it doesn't always have to be this way.
I have a node project my-app that depends on my-other-lib and my-test-lib, my-other-lib also has a dependency on my-test-lib.
This structure in node_modules looks like this:
my-app
├── my-other-lib#1.0.0
└── my-test-lib#1.0.0 (dev dependency)
└── my-other-lib#1.0.0
my-app uses my-other-lib to do some stuff on the production app, my-test-lib is a framework of sorts to help with testing. my-test-lib also makes use of my-other-lib.
I'm writing a test in my-app I want to add a bit of functionality to my-other-lib to help me in that test. I don't need to change any code in my-test-lib to get this working, however I can't figure out how to get this dependency to update without bumping the dependency version in my-test-lib and releasing a new version of it. It feels like I shouldn't have to do that.
If I release my-other-lib#1.1.0, then in my-app run npm install my-other-lib#1.1.0, I end up with this node_modules structure:
my-app
├── my-other-lib#1.1.0
└── my-test-lib#1.0.0 (dev dependency)
└── my-other-lib#1.0.0
One thing that seems odd to me is that my-test-lib specifies the dependency as my-other-lib: "^1.0.0" which implies that it should be fine with using 1.1.0, but still both packages are installed in node_modules.
Is there a way to have my-test-lib use my-other-lib#1.1.0 besides bumping the version in my-test-lib and releasing my-test-lib#1.1.0? And if not, what is the point of specifying the ^ in versions listed in package.json?
my-test-lib is also a npm repository, same as my-app, so you actual structure is the following.
my-app
├── my-other-lib#1.1.0
└── my-test-lib#1.0.0 (dev dependency)
└── my-other-lib#1.0.0
my-test-lib
└── my-other-lib#1.0.0
You need to have control over my-test-lib if you want to upgrade the packages.
let's say your folder structure looks like that:
workspace
├── my-app
└── my-test-lib
The process you should follow is the following (starting from workspace):
// go to your lib
cd my-test-lib
// upgrade my-other-lib
npm upgrade my-other-lib#^1.0.0
//increase your package.json version
// publish your new version
npm publish
// go back to your app
cd ../my-app
// upgrade my-test-lib
npm upgrade my-test-lib#^1.0.0
with this you should end up with the following structure:
my-app
├── my-other-lib#1.0.0
└── my-test-lib#x.x.x (dev dependency) (the new version you published)
└── my-other-lib#1.1.0
Cheers.
I wanted to install this package: https://github.com/react-native-fellowship/react-native-navbar:
npm i react-native-navbar --save
But i've got another, outdated package from another source https://github.com/malkomalko/react-native-navbar:
$ npm list| grep navbar
├── react-native-navbar#1.5.0
│ ├── react-native-navbar#1.1.7 (git://github.com/malkomalko/react-native-navbar.git#fe3d9ed0c717e5304188e22f86ff63f0e029919f)
The first one, which i wanted to install, is a fork from the second, older one.
I already tried to update with "npm update" and i also tried to install a specific version with "npm i react-native-navbar#1.5.0", but it remains the same.
How to deal with such naming conflicts?
I found the root cause. One of my dependencies declared the "wrong" package as a dependency:
"dependencies": {
"react-native-navbar": "malkomalko/react-native-navbar",
"react-native-tabs": "malkomalko/react-native-tabs"
}