Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

You may need an appropriate loader to handle this file type #3

Open
ajainvivek opened this issue May 19, 2017 · 3 comments
Open

You may need an appropriate loader to handle this file type #3

ajainvivek opened this issue May 19, 2017 · 3 comments

Comments

@ajainvivek
Copy link

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

@jnelson180
Copy link

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

@solancer
Copy link

same issue..

screen shot 2018-03-19 at 10 09 13 pm

@maksym-plotnikov
Copy link

maksym-plotnikov commented Jul 14, 2019

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants