Error in console while while clicking button

[prakashchetan001]

Bug Report

Getting Error in console on Button Click
Uncaught TypeError: Cannot read property 'ask' of undefined at Function../node_modules/@stardust-ui/react/dist/commonjs/lib/isFromKeyboard.js.IsFromKeyboard.state (isFromKeyboard.js:14) at Button._this.handleFocus (Button.js:70) at HTMLUnknownElement.callCallback (react-dom.development.js:100) at Object.invokeGuardedCallbackDev (react-dom.development.js:138) at Object.invokeGuardedCallback (react-dom.development.js:187) at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201) at executeDispatch (react-dom.development.js:466) at executeDispatchesInOrder (react-dom.development.js:488) at executeDispatchesAndRelease (react-dom.development.js:586) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:597)

Steps

1. Add a Button to trigger the Portal component.
2. Click the trigger button
3. Error can be seen in the console
   Below is the sample code

export class AddCollectionControl extends React.Component<
  {},
  IAddCollectionControlState
> {
  private _fields: {
    [key: string]: string;
  } = {};
  constructor(props: any) {
    super(props);
    this.state = {
      shouldOpenModal: false
    };
  }
  public render() {
    return (
      <>
        <Dialog open={this.state.shouldOpenModal}>
           <AddCollectionForm onFieldValueChange={this._onFieldValueChange} />
          </Dialog>
        {this._getAddButton()}
      </>
    );
  }

  private _close = () => {
    this.setState({
      shouldOpenModal: false
    });
  };

  private _onFieldValueChange(name: string, value: string) {
    this._fields[name] = value;
  }

  private _handleClick = () => {
    this.setState({
      shouldOpenModal: !this.state.shouldOpenModal
    });
  };

  private _getAddButton = () => (
    <Button content="Add a new collection" onClick={this._handleClick} />
  );
}

Expected Result

There should be no error in console

Actual Result

Error in the console

Version

0.12.0

Testcase

[miroslavstastny]

Minimal example: https://codesandbox.io/s/64oo21jjp3

Source code in isFromKeyboard.ts:

import whatInput from 'what-input'
...
static state = (): State => IsFromKeyboard.getObjectWithPropValue(whatInput.ask() === 'keyboard')

Compiled code in commonjs/lib/isFromKeyboard.js:

IsFromKeyboard.state = function () { return IsFromKeyboard.getObjectWithPropValue(what_input_1.default.ask() === 'keyboard'); };

There is what_input_1.default.ask, But there is no default on what_input_1:

[layershifter]

@miroslavstastny It seems that we need correct our import:

-import whatInput from 'what-input'
+import * as whatInput from 'what-input'

And may be, add internal typings for this package to avoid such situations.

[miroslavstastny]

@layershifter, yes, that import helps. What I am thinking about is what we can do to prevent these kind of errors in the future - we use docsite, which uses es, but never test commonjs.

[layershifter]

@miroslavstastny the simplest way is:

• enable strictMode fully and drop allowSyntheticDefaultImports in our compiler config
• use typings for all packages (they define exports correctly, import * as React vs import React)

This solved all our problems at my previous project.

[miroslavstastny]

Cool, but see #184 (comment).

[kuzhelov]

may suggest to mitigate first, and then provide fix for preventing that

[miroslavstastny]

yes, going to create a PR in a minute.