TypeScript error while using react-switch.

Hi,

I am having the following error when I try to use this library.

The following code:

import * as React from "react";
import Component from "../../AbstractComponent";
import Switch from "react-switch";

export class SwitchComponent extends Component {

  public state = {
    checked: false
  };

  constructor(public props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  public handleChange(checked) {
    this.setState({
      checked: checked
    }, () => {
      if (this.props.onChange) {
        this.props.onChange.call(this, this.state);
      }
    });
  }

  public render() {
    return (
      <label htmlFor="normal-switch" className="switch-container">
        <Switch
          checked={this.state.checked}
          onChange={this.handleChange}
          onColor="#86d3ff"
          offColor="#B2BEC4"
          onHandleColor="#2693e6"
          handleDiameter={20}
          uncheckedIcon={false}
          checkedIcon={false}
          boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
          activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
          height={20}
          width={40}
          className="react-switch"
        />
      </label>
    );
  }
}

produces:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of Component.

It works when I use * import syntax, but TypeScript gives the following error in that case.

`JSX element type ‘Switch’ does not have any construct or call signatures.

[BTOdell]

I just ran into this issue and it was very confusing because of how obscure the error message is. I would strongly recommend switching to the “export namespace” form that React uses. Semantic versioning is suppose to allow you to make breaking changes, so I would recommend doing this for v5.0. At least add documentation to the README to add esModuleInterop: true to the tsconfig.json.

[markusenglund]

I took your advice and made the change for 5.0.0 which was just released. This should no longer be a problem.