You may need an appropriate loader to handle this file type

[ajainvivek]

After installing on react-boilerplate. I get this error.

[jnelson180]

I have this issue too- I'm looking into it now and will post further if I figure it out.

[solancer]

same issue..

[maksym-plotnikov]

Had the same issue - I guess problem is inside CRA configs and that Babel doesn't transpile node_modules with JSX code. So I had to get this lib inside my project 'src' - just placed it in some Component. Also You can copy / paste this code rewritten from gre:

import Diaporama from "diaporama";
import {bool, func, object, number} from "prop-types";

function affectProps(obj, props) {
  for (const k in props) {
    if (k !== "onDiaporamaCreated") {
      // blacklisting only for now. We might do whitelist instead ?
      obj[k] = props[k];
    }
  }

  return obj;
}

export class ReactDiaporama extends Component {
  constructor(props) {
    super(props);
    this.container = React.createRef();
  }

  componentDidMount() {
    const {onDiaporamaCreated} = this.props;
    const opts = affectProps({}, this.props);
    this.diaporama = Diaporama(this.container.current, opts);
    if (onDiaporamaCreated) {
      onDiaporamaCreated(this.diaporama);
    }
  }

  componentWillUnmount() {
    this.diaporama.destroy();
  }

  componentWillReceiveProps(props) {
    affectProps(this.diaporama, props);
  }

  shouldComponentUpdate() {
    return false;
  }

  render() {
    return <div ref={this.container} />;
  }
}

ReactDiaporama.propTypes = {
  data: object.isRequired,
  width: number.isRequired,
  height: number.isRequired,
  resolution: number,
  paused: bool,
  loop: bool,
  autoplay: bool,
  currentTime: number,
  playbackRate: number,
  onDiaporamaCreated: func, // callback giving the diaporama instance. use-case: You can bind Events on the diaporama. See "diaporama" documentation.
};

export default ReactDiaporama;