Easy-peasy: TypeError: dispatcher.useContext is not a function

Created on 3 Nov 2018  路  1Comment  路  Source: ctrlplusb/easy-peasy

When trying easy-peasy in create-react-app I got the following error

TypeError: dispatcher.useContext is not a function

Full stack trace

react.development.js:1497 Uncaught TypeError: dispatcher.useContext is not a function
    at useContext (react.development.js:1497)
    at useStore (easy-peasy.esm.js:377)
    at TodoList (App.js:14)
    at mountIndeterminateComponent (react-dom.development.js:14592)
    at beginWork (react-dom.development.js:15082)
    at performUnitOfWork (react-dom.development.js:17903)
    at workLoop (react-dom.development.js:17944)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:17224)
    at renderRoot (react-dom.development.js:18037)
    at performWorkOnRoot (react-dom.development.js:18919)
    at performWork (react-dom.development.js:18826)
    at performSyncWork (react-dom.development.js:18799)
    at requestWork (react-dom.development.js:18676)
    at scheduleWork (react-dom.development.js:18480)
    at scheduleRootUpdate (react-dom.development.js:19186)
    at updateContainerAtExpirationTime (react-dom.development.js:19212)
    at updateContainer (react-dom.development.js:19280)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:19559)
    at react-dom.development.js:19713
    at unbatchedUpdates (react-dom.development.js:19064)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:19709)
    at Object.render (react-dom.development.js:19776)
    at Module../src/index.js (index.js:7)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (serviceWorker.js:135)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Dependencies

{
  "dependencies": {
    "easy-peasy": "^1.2.0",
    "react": "^16.7.0-alpha.0",
    "react-dom": "^16.6.0",
    "react-scripts": "2.1.1"
  }
}

Code is just copy-paste from the first example in README

import React, { Component } from "react";
import { StoreProvider, createStore, useStore } from "easy-peasy";

const store = createStore({
  todos: {
    items: ["Install easy-peasy", "Build app", "Profit"],
    add: (state, payload) => {
      state.items.push(payload);
    }
  }
});

function TodoList() {
  const todos = useStore(state => state.todos.items);

  return (
    <div>
      {todos.map((todo, idx) => (
        <div key={idx}>{todo.text}</div>
      ))}
    </div>
  );
}

class App extends Component {
  render() {
    return (
      <StoreProvider store={store}>
        <TodoList />
      </StoreProvider>
    );
  }
}

export default App;

Most helpful comment

I found the problem, it was in dependencies, react-dom also needs to be on 16.7.0 alpha
This fixed it:
"react-dom": "16.7.0-alpha.0"

>All comments

I found the problem, it was in dependencies, react-dom also needs to be on 16.7.0 alpha
This fixed it:
"react-dom": "16.7.0-alpha.0"

Was this page helpful?
0 / 5 - 0 ratings