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

Question

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:

Answer 1

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