React 17 support

[sc0ttdav3y]

Hi,

When I try to install this package with react@17.0.1 (latest at time of writing), it fails with a dependency error.

Is there any workaround, or plans to support React 17?

Steps to reproduce

mkdir tempproj
cd tempproj
npm i react@latest
npm i react-outside-click-handler@latest

Error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR!   peer react@"^0.14 || >=15" from react-outside-click-handler@1.3.0
npm ERR!   node_modules/react-outside-click-handler
npm ERR!     react-outside-click-handler@"1.3.0" from the root project
npm ERR!   1 more (react-dom)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14 || ^15.0.0 || ^16.0.0-alpha" from airbnb-prop-types@2.16.0
npm ERR! node_modules/react-outside-click-handler/node_modules/airbnb-prop-types
npm ERR!   airbnb-prop-types@"^2.15.0" from react-outside-click-handler@1.3.0
npm ERR!   node_modules/react-outside-click-handler
npm ERR!     react-outside-click-handler@"1.3.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Context

It looks like this is caused by the dependency on airbnb-prop-types, which currently has an open ticket for React 17 support: ljharb/prop-types-tools#73

[ljharb]

Indeed; this is blocked by ljharb/prop-types-tools#73 and enzymejs/enzyme#2430. Once those land, this package will surely add it.

[jannomeister]

I'm using react 17.0.0 with vitejs and I'm getting React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. when running the app after npm run build

Any workaround?

[ljharb]

This package isn’t compatible with react 17 yet. That specific error, however, implies that you’re getting undefined for a component value and using it in jsx, which is unrelated to this project.

[jorisw]

We're using this library without problems with React 17.0.2.

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-outside-click-handler": "^1.3.0",

[ljharb]

@jorisw i expect this library to work fine with new versions of react for the foreseeable future; but if npm ls exits nonzero, your dependency graph is invalid and you can’t rely on anything working.

[moc89]

We're using this library without problems with React 17.0.2.

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-outside-click-handler": "^1.3.0",

I upgraded to 17.0.2 but still same error.

[jokinol]

Btw, React 18 is now out and this problem still exists :D

But it is not (directly) this library, it is airbnb-prop-types which is dependency of this project and has "react": "^0.14 || ^15.0.0 || ^16.0.0-alpha" as a peerDependencies.

Both of these projects seems a bit outdated, does anyone know is there any alternative(s) for this library?

[ljharb]

Both are blocked on enzyme supporting react 17, and 18. There’s nothing outdated about any of the 3 mentioned projects, except their support of react itself.

[Im-Fran]

@jokinol, Jordan is right, the problem is because enzyme doesn't have support for react 17 and newer. I've linked an alternative in their PR #74 so it can be used, but until an alternative is implemented we won't be seeing an update soon.

[ljharb]

Unfortunately RTL is nowhere close to being an alternative to enzyme.

[patilanz]

any updates?

[vammikk]

hi @ljharb @jokinol, If you're looking for an alternative to react-outside-click-handler, you can use the useClickAway hook from the react-use package. It works like a charm! Here's a TypeScript example:

import { useClickAway } from 'react-use';
import { useRef } from 'react';

const MyComponent: React.FC = () => {
  const ref = useRef<HTMLDivElement>(null);

  useClickAway(ref, () => {
    console.log('Clicked outside');
  });

  return <div ref={ref}>Click outside this element</div>;
};