Easy-peasy: Hooks can only be called inside the body of a function component

[rankun203]

My code is like:

// 1st useAction
import { useAction } from 'easy-peasy'

// 2nd useAction
// function useAction(mapActions) {
//   // Get store myself, I had to rebuild easy-peasy and export StoreContext
//   const store = React.useContext(peasy.StoreContext)
//   return mapActions(store.dispatch)
// }

export const View = () => {
  const updateDocForPrint = useAction(
    (dispatch: any) => dispatch.docForPrint.updateDocForPrint
  );
};

As you can see, View is a function component, however it still produces an error:

/app/node_modules/easy-peasy/node_modules/react/cjs/react.development.js:125
Uncaught Error: Hooks can only be called inside the body of a function component.
    at invariant (/app/node_modules/easy-peasy/node_modules/react/cjs/react.development.js:125)
    at resolveDispatcher (/app/node_modules/easy-peasy/node_modules/react/cjs/react.development.js:1424)
    at Object.useContext (/app/node_modules/easy-peasy/node_modules/react/cjs/react.development.js:1429)
    at Object.useAction (hooks.js:49)
    at exports.USBExplorerView.react_router_1.withRouter (eval at <anonymous> (store.ts:30), <anonymous>:18:37)
    at mountIndeterminateComponent (/app/node_modules/react-dom/cjs/react-dom.development.js:14620)
    at beginWork (/app/node_modules/react-dom/cjs/react-dom.development.js:15091)
    at performUnitOfWork (/app/node_modules/react-dom/cjs/react-dom.development.js:17817)
    at workLoop (/app/node_modules/react-dom/cjs/react-dom.development.js:17857)
    at HTMLUnknownElement.callCallback (/app/node_modules/react-dom/cjs/react-dom.development.js:149)

If I comment out 1st useAction and use 2nd useAction, a customized useAction, it will work.

I'm not sure if this is a React bug or an easy-peasy bug, the definition https://github.com/ctrlplusb/easy-peasy/blob/master/src/hooks.js#L48 is indeed a simple function, just like mine.

[ctrlplusb]

Does this resolve your issue:

https://stackoverflow.com/questions/53028117/react-hooks-error-hooks-can-only-be-called-inside-the-body-of-a-function-compon?noredirect=1&lq=1

[rankun203]

Thanks, I'll try to cold it.

I'm closing this issue as answered, if the issue persists, I'll reopen it.

[aalpgiray]

I am not using RHL, however, I am getting this error. I try to use other hooks but they work. It is a simple enough project. Here is the repo

Edit: This was the problem. https://github.com/facebook/react/issues/13991
I solved it by adding
"alias": { "react": "./node_modules/react" }
to the package.json

[doasync]

I solved this by removing the caret for React dependency in my package.json:

    "react": "16.7.0-alpha.2",
    "react-dom": "16.7.0-alpha.2",

See this comment for more info: https://github.com/facebook/react/issues/14454#issuecomment-449585005

@aalpgiray, you have "react": "^16.7.0-alpha.2" in your repo. Try to remove caret (to use exact version)

[aalpgiray]

Thanks @doasync