Warning: PropTypes validators

[orck-adrouin]

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"
  }
}

[aogaili]

I'm having the same issue, using "react": "^15.4.2", "react-dom": "^15.4.2".

[malroc]

Same issue.

[zhaitao]

Same issue too on 15.5.4.

[sopheakreth]

change version to "react-image-lightbox": "3.4.1"

[zhaitao]

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

[adriantombu]

When I use the 3.4.1 version with react 15.5.3, I get this other warning : Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

I guess we'll have to wait for a permanent fix then :)

[fritz-c]

Apologies for the delayed fix. I think the issue was rooted in the placement of prop-types in peerDependencies. Not 100% sure about that, but it seems to be fixed now in my environment as of v3.5.0

[brandonmp]

ahh, sorry to report I'm still seeing it in my project post-upgrade from 3.4.3 to 4.0.0. I disabled babel cache to make sure it wasn't a caching issue.

   "react": "^15.5.4",
   "react-dom": "^15.5.4",
   "react-image-lightbox": "^4.0.0",

here's details. sorry for ridiculously long file names--side effect of using recompose:

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 ImageLightbox.js:45)
    in ImageLightbox (created by withProps(ImageLightbox))
    in withProps(ImageLightbox) (created by Relay(withProps(ImageLightbox)))
    in Relay(withProps(ImageLightbox)) (at PhotosGrid.js:60)
    in div (at PhotosGrid.js:56)
    in withHandlers(branch(onlyUpdateForKeys(PhotosGrid))) (created by withState(withHandlers(branch(onlyUpdateForKeys(PhotosGrid)))))
    in withState(withHandlers(branch(onlyUpdateForKeys(PhotosGrid)))) (created by withState(withState(withHandlers(branch(onlyUpdateForKeys(PhotosGrid))))))
    in withState(withState(withHandlers(branch(onlyUpdateForKeys(PhotosGrid))))) (created by withProps(withState(withState(withHandlers(branch(onlyUpdateForKeys(PhotosGrid)))))))
    in withProps(withState(withState(withHandlers(branch(onlyUpdateForKeys(PhotosGrid)))))) (created by Relay(withProps(withState(withState(withHandlers(branch(onlyUpdateForKeys(PhotosGrid))))))))
    in Relay(withProps(withState(withState(withHandlers(branch(onlyUpdateForKeys(PhotosGrid))))))) (at SecretPhotosPanel.js:36)
    in div (at SecretPhotosPanel.js:24)
    in SecretPhotosPanel (created by Relay(SecretPhotosPanel))
    in Relay(SecretPhotosPanel) (at SliderPanelSide.js:54)
    in div (at SliderPanelSide.js:49)
    in SliderPanelSide (created by withProps(SliderPanelSide))
    in withProps(SliderPanelSide) (created by Relay(withProps(SliderPanelSide)))
    in Relay(withProps(SliderPanelSide)) (at ListingCard.js:106)
    in div (at ListingCard.js:97)
    in div (created by Card)
    in Card (at ListingCard.js:70)
    in onlyUpdateForKeys(ListingCard) (created by withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard)))))
    in withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard)))) (created by withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard))))))
    in withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard))))) (created by withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard)))))))
    in withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard)))))) (created by withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard))))))))
    in withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard))))))) (created by withState(withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard)))))))))
    in withState(withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard)))))))) (created by withHandlers(withState(withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard))))))))))
    in withHandlers(withState(withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard))))))))) (created by withState(withHandlers(withState(withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard)))))))))))
    in withState(withHandlers(withState(withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard)))))))))) (created by Relay(withState(withHandlers(withState(withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard))))))))))))
    in Relay(withState(withHandlers(withState(withState(withHandlers(withState(withHandlers(withProps(withProps(onlyUpdateForKeys(ListingCard))))))))))) (at ListingsGrid.js:38)
    in div (at ListingsGrid.js:37)
    in div (created by FlipMove)
    in FlipMove (created by FlipMovePropConverter)
    in FlipMovePropConverter (at ListingsGrid.js:31)
    in div (at ListingsGrid.js:30)
    in ListingsGrid (created by Relay(ListingsGrid))
    in Relay(ListingsGrid) (at Dash.js:21)
    in div (created by styled.div)
    in styled.div (at Dash.js:20)
    in withProps(withProps(Dash)) (created by Relay(withProps(withProps(Dash))))
    in Relay(withProps(withProps(Dash))) (created by RouterContext)
    in StaticContainer (created by RouteContainer)
    in RouteContainer (created by RouterContext)
    in div (created by styled.div)
    in styled.div (at App.js:71)
    in div (created by styled.div)
    in styled.div (at App.js:67)
    in div (created by styled.div)
    in styled.div (at App.js:60)
    in div (created by styled.div)
    in styled.div (at App.js:58)
    in App (created by Relay(App))
    in Relay(App) (at routes.js:43)
    in StaticContainer (created by RouteContainer)
    in RouteContainer (created by RouterContext)
    in RouterContext (created by Router)
    in StaticContainer (created by RelayReadyStateRenderer)
    in RelayReadyStateRenderer (created by RelayRenderer)
    in RelayRenderer (created by RelayRouterContext)
    in RelayRouterContext (created by Router)
    in Router (at routes.js:35)
    in _default (at Root.js:8)
    in Root (at index.js:15)