question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't use hooks when `react` & `react-dom` are dev dependencies

See original GitHub issue

Current 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:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:16 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
mkaradenizcommented, May 1, 2019

I think I found the problem. I was testing it using yarn link and I couldn’t get it to work without removing the devDependency. Publishing a package based on 0.5.5 and using that worked fine. Thanks you all!

1reaction
mikecousinscommented, May 7, 2019

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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found