Blocking issue on useDropdown hook not working when importing this package

[ddadaal]

Hello everyone, I now encounter a serious problem when using the package in other project, and with this problem present I can't continue the development since I cannot test my package in a real project. It would be greatly appreciated if any help could be given on the problem.

Recently I've implemented a custom hook called useDropdown which returns state open and function toggle to toggle the state of the dropdown. The source code can be found here.

The implementation is quite simple: using useState to track down the state, useCallback to provide a consistent toggle function, and another hook useEventListener to register event to close the dropdown when user click somewhere other than the dropdown itself.

This function works fine when the code are copied into another project (in my case, a new Gatsby project initialized with gatsby-cli). However, when the function is imported into the same project (by using yarn link in this project, and yarn link "vicui" in the gatsby-based project), the call to useDropdown would crash the application with the following error messages:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Some common causes that may lead to this error are checked and none of them actually exist. They include:

• multiple copy of React: npm ls react/react-dom reports only one react and one react-dom
• mismatching react and react-dom: the versions of React and react-dom are exact match (16.8.6)
• breaking the rules of hooks: the function works fine when they are copied into existing the project, as aforementioned
• the hook are called not inside of a function component: no, they are :(

To reproduce the bug, try the following steps:

• Clone this repo, yarn install and yarn build to build a version
• In this repo, yarn link
• Initialize a Gatsby-based project using gatsby-cli with this quick start guide
• Run yarn link "vicui" in the newly-initialized project
• Use the useDropdown hook in any existing component like below:

header.js

import { useDropdown } from "vicui";

const Header = ({ siteTitle }) => {

  const [open, toggle] = useDropdown(false);

  return (<div/>);
}

• yarn develop and you will see the errors.
• Copy the original code into the project, remove the typescript things and try them again, and it would work just fine.

I have completely no idea why this error would occur and have been strugging on it for several days. It may have something to do with modules resolution machanism, but I don't think I could solve it on my own.

I'll appreciate it very much If anyone could give the problem a look. Thanks for you all!