useSelector from 'react-redux' is undefined when running application

The useSelector function from 'react-redux' is undefined in my react application, even though the versions are up to date, and there are no errors in VS Code (I can even ctrl-click in and see the typings, and the code in the node_modules folder). This manifests in a few ways:

1. The following error [HMR] bundle has 1 warnings: export 'useSelector' was not found in 'react-redux'.

2. In the following component:

   import React, { useState } from 'react';
   import { useSelector } from 'react-redux'; // importing useSelector does not error in VS Code

   const TestComponent = () => {
   const [x, setX] = useState("hello"); // useState works correctly
   console.log(useSelector); // but useSelector is undefined when the application runs
   return <p> {x} </p>
   }

   export default TestComponent;

I am not sure if this error is to do with hot reloading, webpack, or something else entirely.

Package versions:

// react
"@types/react": "^16.9.9",
"react": "^16.10.2",

// redux
"@types/react-redux": "^7.1.5"
"react-redux": "^7.1.3",
"redux": "^4.0.5", 

What I have attempted:

1. Updated all redux packages to latest versions

2. Deleted node_modules and reinstalled

3. Updated hot reloading packages to latest versions

4. Looking into the code of react-redux in node_modules, it does have the useSelector hook, but if I do the following: import * as ReactRedux from 'react-redux'; and then console.log(ReactRedux), I see the following, indicating none of the hooks have been imported:

1: https://i.stack.imgur.com/YGWTC.png

So in your codesnippet, didnt find any store which is used.

I have added a sample working application which increments and decrements the value and sign in and signout

See the below snippet and check

App.js

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { useSelector, useDispatch, Provider } from "react-redux";
import allActions from "./actions";
import { createStore } from "redux";
import rootReducer from "./reducers";
const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
const App = () => {
const counter = useSelector(state => state.counter);
const currentUser = useSelector(state => state.currentUser);
const dispatch = useDispatch();
const user = { name: "Rei" };
useEffect(() => {
dispatch(allActions.userActions.setUser(user));
}, []);
return (
<div className="App">
{currentUser.loggedIn ? (
<>
<h1>Hello, {currentUser.user.name}</h1>
<button onClick={() => dispatch(allActions.userActions.logOut())}>
Logout
</button>
</>
) : (
<>
<h1>Login</h1>
<button
onClick={() => dispatch(allActions.userActions.setUser(user))}
>
Login as Rei
</button>
</>
)}
<h1>Counter: {counter}</h1>
<button onClick={() => dispatch(allActions.counterActions.increment())}>
Increase Counter
</button>
<button onClick={() => dispatch(allActions.counterActions.decrement())}>
Decrease Counter
</button>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);

Working codesandbox

The workaround for me was to install metro package version 0.56.0 .

Via npm:
npm install metro@0.56.0

Via yarn
yarn add metro@0.56.0