Module not found: Can't resolve 'apollo-link-context' - REACT, APOLLO-SERVER - reactjs

Question

I have a backend with users that i want to display on my frontend folder.
In order to do that i need authorization headers to be implemented in React via Apollo Server.
I followed some instruction from here -> https://www.apollographql.com/docs/react/networking/authentication/
This is my code inside App.js
import React from 'react';
import HeroesDota from './components/HeroesDota';
import { ApolloProvider } from '#apollo/react-hooks';
import { ApolloClient } from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import { setContext } from 'apollo-link-context';
const httpLink = new HttpLink({
uri: "http://localhost:8000/graphql/",
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
});
const authLink = setContext((_, { headers }) => {
// get the authentication token from local storage if it exists
const token = localStorage.getItem('token');
// return the headers to the context so httpLink can read them
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : "",
}
}
});
const App = () => {
return (
<ApolloProvider client={client}>
<HeroesDota />
</ApolloProvider>
)};
export default App;
After i run server on localhost:3000 it says: Uncaught Error: Cannot find module 'apollo-link-context'
I installed apollo-link as dependency. I dont know why this error show up. Here is the actual picture.
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#apollo/react-hooks": "^3.1.3",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.0",
"#testing-library/user-event": "^7.2.1",
"apollo-boost": "^0.4.7",
"apollo-cache-inmemory": "^1.6.5",
"apollo-link": "^1.2.13",
"apollo-link-ws": "^1.0.19",
"bootstrap": "^4.4.1",
"graphql": "^14.5.8",
"react": "^16.12.0",
"react-apollo": "^3.1.3",
"react-bootstrap": "^1.0.0-beta.16",
"react-dom": "^16.12.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"styled-components": "^5.0.0",
"subscriptions-transport-ws": "^0.9.16"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
},
"devDependencies": {}
}

Answer 1

You are importing it right here:
import { setContext } from 'apollo-link-context';
Please run npm i apollo-link-context to fix.