npm install clear the react-native in node_modules

Question

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

Answer 1

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.

Answer 2

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:

1. Move the package-lock.json out of the project folder (Don't delete it yet because you will need to inspect it later on)
2. Run rm -rf node_modules && npm install
3. Check the /node_modules and react-native should be there now
4. 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:

1. package-lock.json will be generated (or updated if exists). Redux and its dependencies are saved into it.
2. 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.).
3. 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.