React: TypeError: _useContext is undefined

Question

I'm trying my hand at TypeScript and React. I have a functional component (code below) that is supposed to consume a context with useContext, but it is showing me this weird error that I cannot find a solution to.

If I do not use TS, and go with JSX, it works just fine.

Edit: Screenshot>

Code:

AppProvider.tsx

import React, { useState, useEffect } from "react";

// Application's context (for general application-wide usage)
const AppContext: any = React.createContext(null);

// this will be used below in the componet we will export
export const AppContextProvider = AppContext.Provider;

export const AppProvider: React.FC = (props: any) => {
  const [appName, setAppName] = useState("Blood Donation");
  const [appUser, setAppUser]: any = useState(null);
  const [appInfoBusy, setAppInfoBusy] = useState(false); // working to get or set data

  useEffect(() => {
    getAppInfo();
  }, []);

  const getAppInfo = () => {
    setTimeout(() => {
      setAppName("Test");
      setAppUser({
        name: "Admin",
        email: "test@test.com",
        role_id: 100
      });
    }, 3000);
  };

  return (
    <AppContextProvider
      value={{
        appName: appName,
        appInfoBusy: appInfoBusy,
        appUser: appUser
      }}
    >
      {props.children}
    </AppContextProvider>
  );
};

Consumer: Login.tsx

import React, { useState, useEffect, useContext } from "react";
import {
  Button,
  Card,
  Elevation,
  FormGroup,
  InputGroup,
  Drawer,
  Classes,
  H4,
  Callout,
  H5
} from "@blueprintjs/core";
//@ts-ignore
import ReCAPTCHA from "react-google-recaptcha";

import logo from "../../assets/images/logo.png";
import "../../scss/Login.scss";
import { RecaptchaKey } from "../../shared/Info";
import { AppContextProvider } from "../../shared/context/AppProvider";

const Login: React.FC = props => {
  const [email, setEmail]: React.ComponentState = useState();
  const [password, setPassword]: any = useState();
  const [isOpen, setIsOpen]: any = useState();
  const [resetEmail, setResetEmail]: any = useState();
  const [emailSent, setEmailSent]: any = useState();
  const [captchaOk, setCaptchaOk]: any = useState(false);
  const [working, setWorking]: any = useState(false);

  // context
  const { appName, appUser, appInfoBusy } = useContext(AppContextProvider);

  /**
   * Handles lifecycle hooks
   */
  useEffect(() => {
    // when component is mounted
  }, []);

  /**
   * Handles Captcha change
   * @param value
   */
  const recaptchaChange = (value: any) => {
    setCaptchaOk(value ? true : false);
  };

  const handleRecoverySubmit = () => {
    setWorking(true);
    setTimeout(() => {
      setEmailSent(true);
      setWorking(false);
    }, 3000);
  };

  return (
    <div id="loginPage">
      ... removed for brevity ...
    </div>
  );
};

export default Login;

Any help is gratefully thanked. React and dependencies are all latest as of date.

Answer 1

The error is _useContext not defined. The issue is different than what it is actually referring to.

you created a context called as AppContext and then you export this as export const AppContextProvider = AppContext.Provider;

You have done correct till this stage.

The problem lies at consumer part i.e. login.tsx file.

you are importing a name file inside a curly braces which is not correct, because the context is exported as a name variable. You simply need to write

import  AppContextProvider  from "../../shared/context/AppProvider";

That's it, and when you are calling this context using useContext hooks, then the actual state that you are looking for get accessed and no issue will further persist.

Note: Don't use {} for importing named exports.

reference: When should I use curly braces for ES6 import?

Answer 2

I was using the context provider instead of the context itself inside useContext(), I should have used useContext(AppContext) instead.

Commentary removed because stackoverflow.