npm install clear the react-native in node_modules - react-native

I face with a problem when try to use npm install to install redux to my react-native project. Any time I do run npm install redux --save the react-native directory inside node_modules will be cleared.
Then I use rm -rf node_modules && npm install the all react-native package does not install inside node_modules so I must re-create project.
I also try to copy & past react-redux and redux in node_modules from another project to my current react-native project. But it can't success, the error lead me to the issue on github. I followed this help and it also fail.
Some other information:
➜ npm: 5.0.3
➜ react-native-cli: 2.0.1
➜ react-native: 0.45.0
➜ package.json
{
"name": "MyProjectNAME",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.45.0",
"react-redux": "^5.0.5",
"redux": "^3.6.0"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-jest": "20.0.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}
Any suggest is appreciated. Thank you

Glad you have solved this issue using a workaround way but please allow me to explain why react-native module was removed when you ran npm install redux --save.
Solution:
Move the package-lock.json out of the project folder (Don't delete it yet because you will need to inspect it later on)
Run rm -rf node_modules && npm install
Check the /node_modules and react-native should be there now
Run npm install redux (npm v5 will --save by default) to install redux without having existing modules get removed
What is package-lock.json?
There are a bunch of changes for npm v5 which you can read it here. One of them is generating package-lock.json (lockfile) whenever npm modifies /node_modules or package.json.
With package-lock.json, anyone who runs npm install (v5) will get the exact same node_modules tree that you were developing on. So, you would have to commit this file too.
Why react-native module and others were removed after running npm install somePackageName even they are defined in the package.json?
The removal happened because of your existing node modules were installed prior to npm v5. If you use npm v5 to install a module (e.g. npm install redux), you will notice three things:
package-lock.json will be generated (or updated if exists). Redux and its dependencies are saved into it.
The redux's package.json is different than node modules that were installed prior to npm v5 (some extra fields prefix with _ e.g. _from, _requiredBy, _resolved etc.).
Finally, any module installed prior to v5 will be removed which I guess due to the missing extra fields in its package.json AND does not exist in the newly generated package-lock.json.
So, running rm -rf node_modules && npm install again will not solve the issue because of the package-lock.json file (Remember only redux and its dependencies were saved to the file? You can check the old package-lock.json)
Hope this might help someone else.

Finally, I solved this problem by 2 steps:
1) Create a reactjs project and install redux
2) Copy all content of node_modules in step 1 and paste to my current react-native project.
Reload app. Everything works well.

It gets removed if you create app using yarn. If you have created the app using yarn please run yarn add react-redux instead of npm install react-redux

Related

Is there any way to update a devDependency version of a nested dependency?

In a react-native project, there is mocha (9.2.0) as a devDependency like the following -
react-native-svg -
"dependencies": {
"css-select": "^5.1.0",
"css-tree": "^1.1.3"
}
css-tree -
"devDependencies": {
...
"mocha": "9.2.0",
...
}
When I perform the app bundle, I found the mocha is there.
Now I want to upgrade the mocha version to 10.1.0. I can do that by modifying the package-lock.json. But is it possible to do the same without modifying the package-lock.json by using the npm override or resolution or something similar to that?
you can use patch-package https://github.com/ds300/patch-package, modify dependencies in node_modules and then patch it with npx patch-package css-tree or what package do you want to fix.
You can try this command but it will still update your package.json ultimately
npm install mocha#10.1.0 --save --only=dev

Unable to delete dependency from package-lock.json and node_modules folder

I'm working with a particular dependency which has 2 versions, the community version and the enterprise version. They have both been installed mistakenly.
Here is what part of the dependencies section in the package.json looks like and I want to uninstall (eventually) everything but the first one. However when trying to uninstall ag-charts-community it doesn't work.
"dependencies": {
"#ag-grid-enterprise/all-modules": "^23.2.1",
"ag-charts-community": "^2.0.0",
"ag-charts-vue": "^2.0.0",
"ag-grid-community": "^23.2.1",
"ag-grid-enterprise": "^23.2.1",
"ag-grid-vue": "^23.2.1",
},
When I try to run
npm uninstall --save ag-grid-community
It deletes it from package.json, however it persists in node_modules folder and in package-lock.json. How can I delete all instances of ag-grid-community in those aforementioned areas?

Error installing react-native-firebase/storage......."`#react-native-firebase/app/lib.common does not exist in the Haste module map`"

I installed package "react-native-firebase/storage" as per git instructions (npm install #react-native-firebase/storage --save)
Then I imported package with "import rnFb from '#react-native-firebase/storage'";
However its giving me the error "#react-native-firebase/app/lib.common does not exist in the Haste module map"
Ive tried the instructions given on error message..but to no avail
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
Can anyone help?
Thanks
UPDATE 11/20
#react-native-firebase/storage folder in present in node_modules folder....however "app" folder is not (which is what the error appears to be complaining about)
cd into your project directory.
Install app package first by,
yarn add #react-native-firebase/app
Then install storage package by yarn add #react-native-firebase/storage.
Then execute yarn install and the installed packages will be linked to the project.
You can verify the installation by checking package.json file. Dependencies in package.json should be as follows.
"dependencies": {
"#react-native-firebase/app": "^6.0.4",
"#react-native-firebase/storage": "^6.0.4",
"react": "16.9.0",
"react-native": "0.61.4",
"react-native-gesture-handler": "^1.5.0",
"react-navigation": "^4.0.10"
},
What i believe is you havent downloaded the #react-native-firebase/app which is a pre-requisite to dwonload . Try downloading App firebase first , and then try. Hope it helps. Otherwise feel free to ask any doubts
npm i #react-native-firebase/storage
react-native link #react-native-firebase/storage

How do I fix a "Vue packages version mismatch" error on Laravel Spark v4.0.9?

When I run npm run dev on a Laravel Spark v4.0.9 app, I get the following error:
Module build failed: Error:
Vue packages version mismatch:
- vue#2.0.8
- vue-template-compiler#2.2.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.
My package.json looks like this:
{
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"dependencies": {
"axios": "^0.15.2",
"bootstrap": "^3.0.0",
"cross-env": "^3.2.3",
"jquery": "^2.1.4",
"js-cookie": "^2.1.0",
"laravel-mix": "0.*",
"moment": "^2.10.6",
"promise": "^7.1.1",
"sweetalert": "^1.1.3",
"underscore": "^1.8.3",
"urijs": "^1.17.0",
"vue": "~2.0.1",
"vue-resource": "^1.2.0",
"vue-router": "^2.2.1",
"vue-truncate-filter": "^1.1.6",
"vuejs-datepicker": "^0.6.2"
},
"devDependencies": {
"browser-sync": "^2.18.8",
"browser-sync-webpack-plugin": "^1.1.4"
}
}
I have tried the following (at different times, not in order):
deleted node_modules and npm install
tried just running yarn and yarn upgrade
removing vue-loader and reinstalling
specifying exact versions of vue and vue-template-compiler rather than leaving it up to npm to install or yarn to figure out dependencies
removing other non-essential packages (vue-router, vue-truncate-filter, vuejs-datepicker) and trying all of the above again
banging my head against a wall
This worked for me:
Modify package.json:
“vue”: “^2.0.8",
“vue-template-compiler”: “^2.1.8"
Delete node_modules
Run npm install
For vue ^2.5.17.
In your package.json
Simply Add this in devDependencies or update the version of vue-template-compiler:
"vue-template-compiler": "^2.5.17"
You wil have this output:
"devDependencies": {
...
"lodash": "^4.17.4",
"popper.js": "^1.14.4",
"vue": "^2.5.17", // <= note the version
"vue-template-compiler": "^2.5.17" // <= note the version
},
After that, run:
npm install
Npm will update only the updated packages.
Don't need to remove all node_modules folder. Just update packages: vue, vue-template-compiler and vue-server-renderer by #latest flag and it should help for any cases with dismatched versions of vue packages.
npm i vue-template-compiler#latest --save
npm i vue-server-renderer#latest --save
--save will automatically update version in your package.json file. #latest means install latest available version of package. If you need to update vue do it by the same way like we do it in above example.
Also, you always can check new versions for updates by command: npm outdated. It shows you all list of packages, that should be updated.
By the way, npm update command update only minor and patches versions, but it unusles when you want to update major version. For example npm update will not update 2.4.5 => 3.0.1, but can update
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
This steps helped me:
rm package-lock.json, rm -rf node_modules, npm update, npm install
Check dependency for vue and replace with exact in dev dependency for vue-template-compiler.
For eg.
"dependencies": {
"vue": "^2.5.2",
},
"devDependencies": {
"vue-template-compiler": "^2.5.3",
},
Should be replaced with:
"dependencies": {
"vue": "2.5.2",
},
"devDependencies": {
"vue-template-compiler": "2.5.2",
},
And run the npm install again.
Updating Vue was the solution for me.
npm i vue#latest --save
Want to mention that previously I do the steps described in Kamil' Ocean answer:
npm i vue-template-compiler#latest --save
npm i vue-server-renderer#latest --save
Once updated Vue it worked.
I run the following command:
yarn global upgrade
That will upgrade any relation that need some upgrading
Here, vue template compiler compiles the vue template. If you use vue one version and vue-template-compiler another version, that's a problem.
Run this command
npm update vue-template-compiler
This will fix the issue and it will install a vue template compiler same version like vue js version.
This worked for me and your 100%:
Modify package.json: "vue": "^2.6.12" to "vue": "2.6.12"
Delete the folder node_modules
Delete package-lock.json
Run npm install
I just had to make these two versions match ( by changing the compiler value match the "vue" value in the package.json and run npm install:
"vue": "^2.6.11",
"vue-template-compiler": "^2.6.11"
npm install
No deleting or anything else in this case.
From the accepted answer, instead of deleting node_modules folder and run again yarn install, you can simply upgrade those 2 packages directly:
yarn upgrade vue#^2.0.8
yarn upgrade vue-template-compiler#^2.1.8
Try this : npm install vue-template-compiler#2.0.8 --save-dev
Converting the vue-template-compiler version to same as vue version (for this case 2.0.8) worked for me. Give it a try.
This worked for me:
Modify package.json:
"vue": "^2.5.2" to "vue": "2.5.*"
Delete the folder node_modules
Delete package-lock.json
Run npm install
I used npm install vue --save and that worked for me
As seen in the error message:
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.
I was using a higher vue-loader so I ran the command
npm update vue-template-compiler
and that worked like charm
NPM have special command to handle such a situation
try this:
npm install --legacy-peer-deps
Each one of us will have won the solution. So you need to see your vue version from your Error Message. For me, my Error was :
vue#2.6.14
vue-template-compiler#2.7.14
Ok from the Error Message, I find that the vue version is 2.6.14, So we need to update vue-template-compiler to that version, using:
npm install vue-template-compiler#2.6.14 --save-dev
You can do it like this:
reinstalling the vue version and the compiler with the same version by example
npm i vue#2.6.14
npm i vue-template-compiler#2.6.14
or you can do :
change it in the package.json
"dependencies": {
"vue": "^2.6.14",
},
"devDependencies": {
"vue-template-compiler": "^2.6.14",
},
or you can do : npm update vue-template-compiler if you are using the latest version of vue,
delete the module file and do npm install
You don't need to delete node_modules folder.
- vue#2.0.8
- vue-template-compiler#2.2.6
Update the package with a lower version number. In this case, npm update vue.
Optionally, you may want to npm update vue-loader too
Doing a clean install helped using the following command:
npm ci
More detailed documentation about this command can be found here.
this command save me.
npm install vue-template-compiler#2.5.16 --save-dev
maybe you can just run this to change the vue-loader
npm install vue-loader#latest --force
it works with me
Need to use the same vue-template-compiler as the version of vue been installed.
So I
npm uninstall vue-template-compiler --save-dev
and reinstall with
npm install vue-template-compiler#2.6.14 --save-dev
as the version of vue installed in my package-lock.json is 2.6.14.
Vue packages version mismatch:
vue#2.0.8
vue-template-compiler#2.2.6
Since the version of the Vue-template-compiler is new than that of the Vue
try to match the version
// Following vue#2.0.8 version
npm i vue-template-compiler#2.0.8
or
// Following vue-template-compiler#2.2.6 version
npm i vue#2.2.6
[SOLVED!!]
I went to the very same package.json file of the vue-template-compiler that is complaining, changed the version of the package in there and run yarn, like so:
_~/.config/yarn/global/node_modules/vue-jscodeshift-adapter/node_modules/vue-template-compiler/package.json_:
OLD:
"name": "vue-template-compiler",
"version": "2.6.11"
NEW:
"name": "vue-template-compiler",
"version": "2.6.10"
Run:
yarn
Source: https://github.com/vuejs/vue/issues/10932
Note: path to package.json and versions are specific for my case.

npm install bluebird doesn't install module

I am attempting to use bluebird in a node application. I have tried adding bluebird to my package.json, as well as installing via npm install bluebird.
My package.json dependencies:
"dependencies": {
"express": "visionmedia/express",
"mocha": "visionmedia/mocha",
"bluebird": "petkaantonov/bluebird",
"waitjs": "elving/wait"
}
Regardless of what method I try, it doesn't look like the module is actually being installed. After I run the install; in node_modules\bluebird there are only 4 files:
changelog.md
LICENSE
package.json
READEME.md
As you can see, there is no code pulled down which would actually comprise the module. The package.json for bluebird does not have a dependencies section, so I am not sure if maybe the package.json file for the module is incorrect?
I've pasted the package.json contents on pastebin for easier viewing.
I'm pretty stumped why this is not installing correctly.
npm version: 2.11.3.
node version: v0.12.7.
Thanks for any help.
The dependencies section of the packages.json should have version numbers as the module values, not git repos.
If you are having this issue, remove your dependcies section from package.json and then install each module using npm install {module name} -save.
My package.json ended up looking like:
"dependencies": {
"bluebird": "^2.9.34",
"express": "^4.13.1",
"mocha": "^2.2.5",
"waitjs": "^0.2.0"
}
Thanks to untogethered on reddit for the answer.
First thing to always try with module install problems is:
npm cache clean
Then try and install again, also remember to remove the bad install at node_modules/bluebird