Module not found: Can't resolve 'apollo-client'

Question

While migrating from apollo-boost to @apollo/client 3.x lib. for reactjs-graphql application facing this issue.

Failed to compile.
./node_modules/@apollo/react-hooks/lib/react-hooks.esm.js
Module not found: Can't resolve 'apollo-client' in 'C:\geospat\node_modules\@apollo\react-hooks\lib'

For reference used apollo-boost-migration and apollo-client-3-migration documents.

Below is the new package.json

{
  "name": "gui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.3.21",
    "graphql": "14.5.8",
    "@material-ui/core": "^4.11.0",
    "leaflet": "1.5.1",
    "luxon": "^1.24.1",
    "moment": "2.24.0",
    "i18next": "17.0.12",
    "i18next-xhr-backend": "3.1.2",
    "@types/jest": "24.0.17",
    "@types/leaflet": "1.5.1",
    "@types/luxon": "^1.24.0",
    "@types/node": "12.7.1",
    "@types/react": "16.9.1",
    "@types/react-dom": "16.8.5",
    "@types/react-leaflet": "2.4.0",
    "@types/react-loader-spinner": "^3.1.0",
    "@types/recharts": "^1.8.16",
    "classnames": "2.2.6",   
    "jest-sonar-reporter": "2.0.0",    
    "node-sass": "4.12.0",
    "normalize.css": "8.0.1",
    "numeral": "2.0.6",
    "ramda": "0.26.1",
    "react": "16.12.0",
    "react-apollo": "3.1.3",
    "react-dom": "16.12.0",
    "react-i18next": "10.12.2",
    "react-idle-timer": "^4.5.2",
    "react-leaflet": "2.4.0",
    "react-loader-spinner": "^3.1.14",
    "react-redux": "7.1.0",
    "react-router-dom": "5.0.1",
    "react-scripts": "3.3.0",
    "redux": "4.0.4",
    "typescript": "3.5.3",
    "use-query-params": "0.4.5"
  }, 
  "devDependencies": {
    "@types/classnames": "2.2.9",
    "@types/debug": "4.1.5",
    "@types/enzyme": "3.10.3",
    "@types/enzyme-adapter-react-16": "1.0.5",
    "@types/enzyme-to-json": "1.5.3",
    "@types/ramda": "0.26.29",
    "@types/react-redux": "7.1.1",
    "@types/react-router-dom": "4.3.5",
    "@types/redux-mock-store": "1.0.1",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.14.0",
    "enzyme-to-json": "3.4.0",
    "mock-apollo-client": "1.1.0",
    "react-dates": "21.0.1",
    "react-leaflet-vectorgrid": "2.2.1",
    "recharts": "1.7.1",
    "redux-devtools-extension": "2.13.8",
    "redux-mock-store": "1.5.3",
    "waait": "1.0.5"
  },  
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },  
  "jest": {
    "collectCoverageFrom": [
      "!src/**/*.snap",
      "src/components/**/*.{ts,tsx}",
      "src/configuration/**/*"
    ],
    "transformIgnorePatterns": []
  },
  "jestSonar": {
    "reportPath": "coverage",
    "reportFile": "jest-sonar-report.xml",
    "indent": 4
  }
}

Tried deleting old node_modules directory and then ran npm i command but the same error was shown on the console.
What is missed here?

Answer 1

npm i @apollo/client and then using @apollo/client in import statement

Answer 2

When migrating to @apollo/client 3.x from earlier version or apollo-boost, all other apollo related libraries needs to be removed and their references in code ( mostly import statements ) needs to be replaced by '@apollo/client'.
In the above package.json most of the apollo packages were removed except "react-apollo".
Once that package is removed, the error mentioned above went away or rather replaced by new errors.
But it's just replacing the erring import statements with the one for '@apollo/client'.