Can't use hooks when `react` & `react-dom` are dev dependencies
See original GitHub issueCurrent Behavior
Thank you for this project!
I’m not sure if I missed or didn’t understand something, but when choosing the react
template, react
& react-dom
are added as dev dependencies. When you then try to use a hook inside your library, you get a react-invalid-hook-call
error. It works fine when removing them as dev dependencies and running yarn
again.
Example:
export const Thing = () => {
const [fooBar, setFooBar] = React.useState('foo');
return (
<div onClick={() => setFooBar('bar')}>
the snozzberries taste like {fooBar}
</div>
);
};
Expected behavior
I would expect the template to enable me to use hooks.
Suggested solution(s)
No idea if “just removing the dev dependencies” is the proper solution. It at least worked for me.
Your environment
Software | Version(s) |
---|---|
TSDX | 0.5.4 |
TypeScript | 3.4.5 |
Browser | Chrome 74.0.3729.108 |
npm/Yarn | Yarn 1.12.3 |
Operating System | MacOS 10.14.4 |
Issue Analytics
- State:
- Created 4 years ago
- Reactions:1
- Comments:16 (4 by maintainers)
Top Results From Across the Web
Invalid Hook Call Warning - React
There are three common reasons you might be seeing it: You might have mismatching versions of React and React DOM. You might be...
Read more >Cant use Hooks with my React Component Library. Invariant ...
"Hooks can only be called inside the body of a function component." Let's rule out all possibilities according to React docs:.
Read more >Solving the problem with NPM Link and React Hooks - Medium
The error above meant we were unable to use React Hooks in our ... common React dependencies which include react, react-dom and react-redux....
Read more >react-hot-loader - npm
If you need hooks support, use @hot-loader/react-dom ... There is only one condition for it - a non zero dependencies list.
Read more >Solving React Hooks' invalid hook call warning - Rob Kendal
You might have mismatching versions of React and React DOM. · You might be breaking the Rules of Hooks. · You might have...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think I found the problem. I was testing it using
yarn link
and I couldn’t get it to work without removing thedevDependency
. Publishing a package based on0.5.5
and using that worked fine. Thanks you all!This doesn’t work if you’re trying to deploy the example site to Netlify or something similar. Is there any other way to accomplish this?