4

I'm trying to import mousetrap into a react project for some simple keyboard bindings. I installed Mousetrap via yarn. I don't have any errors importing, but the Mousetrap library object is undefined when I try to use it. This is from my main App.tsx component

import Mousetrap from 'Mousetrap';

export default class App extends React.Component {
componentDidMount() {
    Mousetrap.bind(['left'], dataStore.pagination.prev());
    Mousetrap.bind(['right'], dataStore.pagination.next());
}

componenentDidUnmount() {
    Mousetrap.unbind('left', dataStore.pagination.prev());
    Mousetrap.unbind(['right'], dataStore.pagination.next());
}

public render() {

Here's the error I'm getting. error

I also tried initiating an Mousetrap object to use, but I get this error (plus there's nothing in the documentation saying I would need to).

const mousetrap: Mousetrap = new Mousetrap();

error

I'm using react, typescript, mobx, material-ui and several other libraries, and I'm quite new to all of them. Any advice would be helpful.

aioobe
  • 413,195
  • 112
  • 811
  • 826
user3380406
  • 43
  • 3

1 Answers1

3

Mousetrap has no named export, so your named import statement will result in undefined. You can import the library using:

import * as Mousetrap from 'Mousetrap';
hackerrdave
  • 6,486
  • 1
  • 25
  • 29
  • Excellent. That did it. Is there something I may have missed in the documentation that would indicate this? I had been going through this https://craig.is/killing/mice – user3380406 Oct 19 '17 at 12:34
  • 1
    nothing in the docs, since was probably written prior to named imports/exports, just looked in the main entry file to see how it was implemented – hackerrdave Oct 19 '17 at 13:20
  • This does not work. If I `import * as Mousetrap from '/location/mousetrap.min.js';` then `Mousetrap` is a `Module` object – in which neither `Mousetrap.Mousetrap` nor `Mousetrap.bind` are defined. – WoodrowShigeru Jun 27 '23 at 16:26