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

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

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'.

Answer 2

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