question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Warning: PropTypes validators

See original GitHub issue

Hello,

I tried your react component and it work really well. However using it generates a warning in the console:

warning.js:36 Warning: Failed prop type: Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types
    in ReactImageLightbox (at App.js:43)
    in App (at index.js:7)

I’m new to react to perhaps I am missing something. I created my application using create-react-app and it uses react V15.4.2. Should I upgrade to react 15.5 ?

Thanks


The following code reproduces the issue:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Lightbox from 'react-image-lightbox';


class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
      photoIndex: 0
    };
  }


  render() {
    const {isOpen, photoIndex} = this.state;


    const images = [
      '//placekitten.com/1500/500',
      '//placekitten.com/4000/3000',
      '//placekitten.com/800/1200',
      '//placekitten.com/1500/1500'
    ];

    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>

        <button onClick={() => this.setState({ isOpen: true })}>Open lightbox</button>


        {isOpen &&
                <Lightbox
                  mainSrc={images[photoIndex]}
                  nextSrc={images[(photoIndex + 1) % images.length]}
                  prevSrc={images[(photoIndex + images.length - 1) % images.length]}

                  onCloseRequest={() => this.setState({ isOpen: false })}
                  onMovePrevRequest={() => this.setState({
                    photoIndex: (photoIndex + images.length - 1) % images.length,
                  })}
                  onMoveNextRequest={() => this.setState({
                    photoIndex: (photoIndex + 1) % images.length,
                  })}
                />
                }
      </div>
    );
  }
}

export default App;

Related package.json:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-image-lightbox": "^3.4.3",
    "sinon": "^2.1.0"
  },
  "devDependencies": {
    "react-scripts": "0.9.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:8 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
zhaitaocommented, May 8, 2017

Not sure if down grade is the right thing to do to fix the issue, but it works. Thanks @sopheakreth .

1reaction
sopheakrethcommented, May 8, 2017

change version to “react-image-lightbox”: “3.4.1”

Read more comments on GitHub >

github_iconTop Results From Across the Web

Don't Call PropTypes Warning - React
In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any...
Read more >
PropTypes validators directly is not supported from `TreeView ...
I'm getting this PropTypes validators directly is not supported warning for these components TreeView , ObjectInspector , ConnectedTreeNode ...
Read more >
Calling PropTypes validators directly is not supported by the ...
Warning : Failed propType: Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.
Read more >
How to validate React props using PropTypes - LogRocket Blog
Learn how to validate props with React PropTypes, React's internal mechanism for adding type checking to component props.
Read more >
Calling PropTypes validators directly is not supported" when ...
2. Build and run Firefox. 3. Open the DevTools Panel. 4. Select the Memory tab. 5. open the Browser Console. This warning appears...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found