Fixing KEYBOARD_DOM_ERROR - simple-keyboard

Note for SSR users: Window-less support is coming in a future release. Click here to track progress.

Questions & Answers

I’m getting KEYBOARD_DOM_ERROR. How to make it go away?

“KEYBOARD_DOM_ERROR” is thrown when simple-keyboard cannot find its DOM element.

As per the usage instructions, there must be an HTML element (generally with the class “simple-keyboard”) present for the keyboard to work.

<div class="simple-keyboard"></div>

What if I’m getting this on Server Side Rendering (with static site generators)?

Simple-keyboard uses document.querySelector to find its DOM element. Since window (and by extension window.document) is not available in NodeJS/serverside, SSR builds will likely fail.

To fix this, you can do like so:

if (window) {
  import("simple-keyboard").then(KeyboardClass => {
    const Keyboard = KeyboardClass.default
    this.keyboard = new Keyboard({
      onChange: input => this.onChange(input),
      onKeyPress: button => this.onKeyPress(button),
    });
  });
}

(Source: simple-keyboard-gatsby-demo)

Note: Conditional imports are not strictly needed, the idea is to only instantiate simple-keyboard when window is defined.