Type 'Context' is missing the following properties from type 'Context': Provider, Consumer TS2345

Question

I am trying to use rootstore to access two different stores in my react Project. RoorStore.ts =>

import ExtractionStore from "./extractionStore";
import UserStore from "./userStore";
import { createContext } from "vm";

export class RootStore {
  extractionStore: ExtractionStore;
  userStore: UserStore;

  constructor() {
    this.extractionStore = new ExtractionStore(this);
    this.userStore = new UserStore(this);
  }
}

export const RootStoreContext = createContext(new RootStore());

However while trying to inject it into my component I am getting an Error:

Component tsx =>

    const ExtractionDashboard: React.FC = () => {
      const rootStore = useContext(RootStoreContext);
      const { loadWorkList, loadingInitial } = rootStore.extractionStore;

Error:

Argument of type 'Context' is not assignable to parameter of type 'Context<unknown>'.
  Type 'Context' is missing the following properties from type 'Context<unknown>': Provider, Consumer  TS2345

     7 | 
     8 | const ExtractionDashboard: React.FC = () => {
  >  9 |   const rootStore = useContext(RootStoreContext);
       |                                ^
    10 |   const { loadWorkList, loadingInitial } = rootStore.extractionStore;
    11 | 
    12 |   useEffect(() => {

score 23 · Accepted Answer · edited Jun 09 '22 at 23:28

23

You are incorrectly importing the createContext function

What you have

import { createContext } from "vm";

What you should have

import { createContext } from "react";

edited Jun 09 '22 at 23:28

worc

3,654
3
31
35

answered Dec 24 '19 at 03:45

Trash Can

6,608
5
24
38

yep. Got that, Thanks. Stupid Mistake. – Exorcist Dec 27 '19 at 05:38

score 3 · Answer 2 · answered May 09 '21 at 03:17

I was in a situation where I encountered this error but not because of an incorrect import. In my case I was trying to assign a type to my (de-structured) context object when I wasn't supposed to.

interface ContextInterface {
    name: string;
}

const Context = createContext<ContextInterface>({ name: 'John Smith' });

//error here: Type 'ContextInterface' is missing the following properties from type 'Context<ContextInterface>': Provider, Consumer ts(2739)
const { name }: React.Context<ContextInterface> = useContext<ContextInterface>(Context);

Removing React.Context<ContextInterface> resolved the error.

//no error
const { name } = useContext<ContextInterface>(Context);

Type 'Context' is missing the following properties from type 'Context': Provider, Consumer TS2345

2 Answers2