Search code examples
javascriptreact-nativenpmexponative

Is there a better way to fix npm vulnerabilities?


I'm having a problem fixing the vulnerabilities in my expo react-native project. It is a react-native app under development.

I keep getting this;

up to date, audited 1375 packages in 1m

73 packages are looking for funding
  run `npm fund` for details

18 vulnerabilities (10 moderate, 8 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Here's my package.json file;

{
  "name": "xxxxx",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/drawer": "^6.5.8",
    "@react-navigation/native": "*",
    "@react-navigation/native-stack": "*",
    "expo": "^47.0.9",
    "expo-constants": "~14.0.2",
    "expo-contacts": "~11.0.1",
    "expo-file-system": "~15.1.1",
    "expo-font": "~11.0.1",
    "expo-location": "~15.0.1",
    "expo-sms": "~11.0.0",
    "expo-speech": "~11.0.0",
    "expo-status-bar": "~1.4.2",
    "firebase": "^9.16.0",
    "from": "^0.1.7",
    "native": "^0.3.3",
    "react": "18.1.0",
    "react-native": "0.70.8",
    "react-native-elements": "^3.4.3",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-google-places-autocomplete": "*",
    "react-native-maps": "1.3.2",
    "react-native-maps-directions": "^1.9.0",
    "react-native-paper": "4.9.2",
    "react-native-reanimated": "~2.12.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-sha256": "^1.4.9",
    "react-native-svg": "13.4.0",
    "react-navigation": "^4.4.4",
    "reanimated-bottom-sheet": "*"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "react-native-dotenv": "^3.4.8"
  },
  "private": true
}

I tried multiple solutions such as;

npm audit
npm audit fix
npm audit fix --force
npm update
npm upgrade
npx remove-node-modules
npm install
npm install --check

I also tried manually fixing the dependencies to make them compatible but to no avail. In most cases, the errors only got worse.

By running npx expo-doctor however, this was the result;

$ npx expo-doctor

✔ Validating global prerequisites versions passed
✔ Checking for incompatible packages passed
✔ Checking for conflicting global packages in project passed
✔ Verifying prebuild support package versions are compatible passed
✔ Checking dependency versions for compatibility with the installed Expo SDK passed
✔ Validating Expo Config passed
✔ Checking package.json for common issues passed

Didn't find any issues with the project!

Yet the dependency errors still remain.

How can I fix the dependencies?


Solution

  • From my experience, there's no magic command to fix all the vulnerabilities in a project, as the project gets older and versions outdated security issues start raising. That said, how do we fix them?

    The best way is to upgrade your packages.

    Start by running npm audit, this will give you the full list of vulnerabilities, tell in which version it was patched and what package is using that dependency (labeled as dependency of), all you need to do is upgrade the package either with npm install package-name or manually setting the version in your package.json and then running npm install.

    Repeat the process till you fix them all.

    Now there's more way of fixing these vulnerabilities without upgrading the package, you can directly upgrade the dependency in the package-lock.json, however I don't recommend this way unless you're using a tool like Dependabot.