Cannot read property 'isReactComponent' of undefined

[PaulLewisDancerace]

react-onclickoutside.es.js:329

New (13/08/19) NPX CRA build with react-onclickoutside - fails as soon as the functional component is wrapped.

[Pomax]

Could I ask you to add a minimal bit of code that shows this happening? Especially given that the indicated line is an empty line between a componentWillUnmount and render definition... =/

[PaulLewisDancerace]

Our set up is based exactly on your hooks example. We have an older app that still works, but if you create a new app with CRA and add react-onclickoutside as a dependency, then set up a simple example it will fail every time. We tested with older versions of React, duplicating existing projects and more.

We used this example...

import React, { useState } from "react";
import onClickOutside from "react-onclickoutside";

const Menu = () => {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);
  Menu.handleClickOutside = () => setIsOpen(false);
  return (
      //...
  )
};

const clickOutsideConfig = {
  handleClickOutside: () => Menu.handleClickOutside
};

export default onClickOutside(Menu, clickOutsideConfig);

[jRichardeau]

Same issue for me with functional component, with these dependencies :

"react-onclickoutside": "6.9.0" "react": "16.8.4", "react-dom": "16.8.4"

Works only if the component is created with the "function" keyword

[jkillian]

We encountered this same error happening on this line of code in react-onclickoutside, because WrappedComponent.prototype is not defined in some cases:

I haven't had time yet to narrow down exactly when this is the case, but in our situation, it appeared to happen when the wrapped component was a React forwardRef component.

[jkillian]

To add more details, React forwardRef components are plain objects and don't have a prototype property:

  return {
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };

Whereas class objects and functions do, so they don't cause the above issue. Other components, like React.memo components share a similar pattern to forwardRef ones, so they likely also will cause a break when used with onclickoutside.

https://github.com/facebook/react/blob/d862f0ea566be38d0c6a67447cb3a4bcf256cd55/packages/react/src/forwardRef.js#L49L52

[tammo]

I ran into the same problem, when using next.js and a function component in this case. To workaround the issue I added a "prototype" field..

Edit: I was also using server side rendering where the error happened.

MyFunctionComponent.prototype = {}

Edit: @pedro-lb made the example more clear.

[pedro-lb]

Also having this problem with funcional components. I'm following the example.

Dropdown.prototype = {}

doesn't solve it for me.

[farazbhinder]

Using Gatsby, I also ran into this issue on running gatsby build. @tammo's comment solved it for me! :)

[dreamerchandra]

I ran into this issue and checked the source code for further details... In the source code, you guys are accessing WrappedComponent.proptype to check if its react component or not... But since I was creating function using arrow function which won't even have a prototype.... for eg.

const Component = () => <><...></> //Componet.prototype is not available

here though Component is valid react component but Component.proptype is not available and is throwing uncaught error...

[farazbhinder]

@dreamerchandra I am also using functional components. Try adding the line after your functional component ends, like so const Component = () => <>...</>. Next line Component.proptype = {}

[strongui]

I went back to using class components when using this package. This package really isn't ready for functional components anyways, as you cannot have multiple functional components render on the same page.

[liro]

I migrated to this solution for functional components: https://usehooks.com/useOnClickOutside/

[burt23]

@jRichardeau thanks your suggestion worked for me! CRA using hooks

Works only if the component is created with the "function" keyword

[Thiry1]

In my case, using function instead of arrow function solved this issue

[danielanthonyl]

@jRichardeau thanks your suggestion worked for me! CRA using hooks

Works only if the component is created with the "function" keyword

can someone explain why here -> https://codesandbox.io/s/vn66kq7mml?file=/src/Menu.js it works. Actually, this is the sample that they have on the README file.

[dmishh]

I removed this package, it's super strange when the example works and your code does not, relying on the same logic. Migrated to https://github.com/Andarist/use-onclickoutside

[BradenLinick]

In my case, using function instead of arrow function solved this issue

This worked for me. However, it's strange how many people are all having this issue and it doesn't seem like any dev support has been given, since the docs say something like "only the latest versions of react will get updates and bug fixes."

[beqramo]

the best way to handle without this lib is this https://ahooks.js.org/hooks/dom/use-click-away/ it has the most comprehensive handling.

[pacocom]

I ran into the same problem, when using next.js and a function component in this case. To workaround the issue I added a "prototype" field..

Edit: I was also using server side rendering where the error happened.

MyFunctionComponent.prototype = {}

Edit: @pedro-lb made the example more clear.

Working for me in gatsby build