Cannot read property 'isReactComponent' of undefined

[Kyaw Siesein]

I am getting this error Cannot read property 'isReactComponent' of undefined with the basic Setup.

App.js

import React from "react";
import "./App.css";
import Something from "./Something";

function App() {
  return (
    <div className="App">
      <Something style={{ width: 500, height: 500, background: "red" }} />
    </div>
  );
}

export default App;

Something.js

import React from "react";
import onClickOutside from "react-onclickoutside";

const Something = props => {
  Something.handleClickOutside = () => console.log("hello");
  return <div style={props.style}>Something</div>;
};

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


export default onClickOutside(Something, clickOutsideConfig);

[Nikola Rajković]

Getting the same error with basically the same minimal setup.

"react": "^16.8.4",
"react-onclickoutside": "^6.8.0",

[Kyaw Siesein]

This happens in the latest node version. Not in LTS.

[Denys Hrebenets]

For me, the solution was changing the stateless functional component to normal extends Component.

[Pomax]

The code you've written would only ever have a single Something.handleClickOutside bound, no matter how many occurences of your functional component you'd use: that's bad.

As such, this HOC wants real components as its wrapping target. You can make it work with functional components if you absolutely need to, but it ends up being more code than just writing your code as:

class Something extends Component {
  handleClickOutside() { console.log("hello"); }
  render() { return <div style={this.props.style}>Something</div>; }
}

[Kyaw Siesein]

@Pomax Thanks for the clarification. But what if we really wanted to use hooks OR the component is in hooks ?

[Waldo Lavaut]

I am getting the same error using a function component following your code:
https://codesandbox.io/s/vn66kq7mml

import React from "react";
import onClickOutside from "react-onclickoutside";
import williamGola from "../../wg.jpg";
import lorena from "../../lorena.jpg";
import waldo from "../../waldo.lavaut.jpg";

const Profile = ({ handleLogOut, user }) => {
  const [isOpen, setIsOpen] = React.useState(false);

  const toggle = () => setIsOpen(!isOpen);

  Profile.handleClickOutside = () => setIsOpen(false);

  return (
    <div className="ml-3 relative">
      <div>
        <button
          onClick={toggle}
          className="max-w-xs flex items-center text-sm rounded-full focus:outline-none focus:shadow-outline"
          id="user-menu"
          aria-label="User menu"
          aria-haspopup="true"
        >
          <img
            className="h-8 w-8 rounded-full"
            src={
              user !== null && user.username === "lorena.zozaya"
                ? lorena
                : user !== null && user.username === "waldo.lavaut"
                ? waldo
                : williamGola
            }
            alt="Profile"
          />
        </button>
      </div>
      <div
        className={
          isOpen
            ? "origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg"
            : "hidden"
        }
      >
        <div
          className="py-1 rounded-md bg-white shadow-xs"
          role="menu"
          aria-orientation="vertical"
          aria-labelledby="user-menu"
        >
          <button
            className="w-full block px-4 py-2 text-sm text-gray-700 focus:outline-none hover:bg-gray-100 transition ease-in-out duration-150"
            role="menuitem"
          >
            Tu perfil
          </button>
          <button
            className="w-full block px-4 py-2 text-sm text-gray-700 focus:outline-none hover:bg-gray-100 transition ease-in-out duration-150"
            role="menuitem"
          >
            Settings
          </button>
          <button
            onClick={handleLogOut}
            className="w-full block px-4 py-2 text-sm text-gray-700 focus:outline-none hover:bg-gray-100 transition ease-in-out duration-150"
            role="menuitem"
          >
            Salir
          </button>
        </div>
      </div>
    </div>
  );
};

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

export default onClickOutside(Profile, clickOutsideConfig);

is this happening because you expect a Class Component?