Cannot find name 'SomeContext' ts (2304) - Error thrown on every instance of the useContext(SomeContext)

Question

I have tried to update a small app from passing state through quite a few components to using context and I cannot get it to work again.

Could someone point me in the right direction... I have create an issue on GitHub so the full codebase is easier to see Issue on GitHub

Some example code is below, the project is using Vite + React and I'm on VSCode. I have put an image below of the errors I keep getting.

code from MathCard.tsx

import { useState, createContext } from 'react'

import MathCardHeader from './MathCardHeader'
import MathCardBody   from './MathCardBody'
import MathCardFooter from './MathCardFooter'

const MathContext = createContext(1);

const MathCard = () => {
  const [num, setNum] = useState(1);
  return (
        <div className="card bg-dark-green text-white shadow-lg">
      <MathContext.Provider value={num}>
        <MathCardHeader />
        <MathCardBody />
        <MathCardFooter />
      </MathContext.Provider>
        </div>
  );
};

export default MathCard;

code from MathCardHeader.tsx

import { useContext } from 'react'

export default function MathCardHeader() {
  const {num, setNum} = useContext(MathContext);
    return (
        <div className="card-header bg-darker-green p-3">
            <h2 className="display-5">Choose Your Number!</h2>
            <input value={num}
        onChange={(e) => {
          setNum(e.target.value);
        }}
                className="form-control bg-dark-green text-white" 
                type="number" 
                placeholder="Enter your number" 
                aria-label="Enter your number" 
            />
                <em>You have chosen number {num}.</em>
        </div>
    );
};

Thanks in advance... Craig

I have looked an the formatting of the code, this is all writted in TypeScript so I wondered if I was not getting the correct syntax.

I have checked the latest React docs and the code has been inline with that.

Answer 1

Looking at the repository, there are two main reasons that you are getting errors.

Firstly, components cannot find MathContext because it is not being imported.

My suggestion would be to move your context into a dedicated file to make it easier to export/import.

import { createContext } from "react";

type MathContextType = {
  num: number,
  setNum: React.Dispatch<React.SetStateAction<number>>,
};

const MathContext = createContext<MathContextType>({
  num: 1,
  setNum: () => {},
});

export default MathContext

Secondly, there is some confusion over the structure of the context value. In some components you try to read a value, others expect an object.

Assuming you are looking to pass the state and it's setter through context (like in How to pass State in Context React), I'd pass the following through your provider.

<MathContext.Provider value={{
  num,
  setNum,
}}>

</MathContext.Provider>

Then import your context, and use it as follows:

const { num } = useContext(MathContext);

...or if the state setter is required:

 const { num, setNum } = useContext(MathContext);