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;
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"
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"