Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

react-event-listener incompatibility >=0.5.6 #11550

Closed
2 tasks done
Thomas101 opened this issue May 23, 2018 · 7 comments
Closed
2 tasks done

react-event-listener incompatibility >=0.5.6 #11550

Thomas101 opened this issue May 23, 2018 · 7 comments
Labels
bug 🐛 Something doesn't work

Comments

@Thomas101
Copy link

  • This is a v1.x issue (v0.x is no longer maintained).
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Install @material-ui/core 1.0.0 from npm it pulls in react-event-listener 0.5.8 as per dependency of ^0.5.1.

Create a tooltip as so, tooltip should render...

<Tooltip title="title">
  <span>Content</span>
</Tooltip>

Current Behavior

Throws an error.

Warning: React.createElement: type is invalid -- expected a string (for built-in component) or a class/function (for composite components) but got: object.
  Check the render method of `Tooltip`.
  ...

A little more digging reveals that the import of react-event-listener comes back with a nested default

{
  default: {
    default: function () { ... }
  }
}

Forcing an install of react-event-listener 0.5.5 doesn't display this issue. The import comes in as expected

Your Environment

Tech Version
Material-UI v1.0.0
React v16.3.2
browser Chrome 66
@oliviertassinari oliviertassinari added the status: waiting for author Issue with insufficient information label May 23, 2018
@oliviertassinari
Copy link
Member

Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

It's working fine in https://codesandbox.io/s/5v5nl0x56k.

@Thomas101
Copy link
Author

I can't seem to get it working on codesandbox. Here's a git repo. Hope that helps!

git clone https://github.com/Thomas101/material-ui-examples.git
cd material-ui-examples/11550-react-event-listener
npm install
npm start
open index.html

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work and removed status: waiting for author Issue with insufficient information labels May 23, 2018
@oliviertassinari
Copy link
Member

@TrySound Any idea?
The following diff solves the problem:

{
  "name": "react-event-listener",
  "version": "0.5.8",
  "description": "A React component that allow to bind events on the global scope",
  "main": "dist/react-event-listener.cjs.js",
- "module": "dist/react-event-listener.esm.js",
  "scripts": {
``

@TrySound
Copy link
Contributor

@oliviertassinari The problem is probably happens because of mixing default and named exports. I believe that breaking change with import { EventListener } from 'react-event-listener' will solve the problem. default exports suck again. So let's publish 0.5.9 without esm and then make this breaking change.

@TrySound
Copy link
Contributor

Just remove that line for 0.5.9.

@oliviertassinari
Copy link
Member

https://github.com/oliviertassinari/react-event-listener/releases/tag/v0.5.9

@Thomas101
Copy link
Author

Wow that's some stellar fixing :). Confirm fixed. Thanks very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work
Projects
None yet
Development

No branches or pull requests

3 participants