CODEWITHSUNDEEP
reactjssparklines
Kishore Chandra
Kishore Chandra

Reputation: 606

Warning console while using Sparklines - Reactjs

Facing a console warning about props of Sparklines..

Warning: You are manually calling a React.PropTypes validation function for the color prop on SparklinesLine. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library.

Please look in to the code

import React, {Component} from 'react';
    import {Sparklines, SparklinesLine, SparklinesBars} from 'react-sparklines';

export default (props) => {
  return(
      <Sparklines data={props.data}>
        <SparklinesLine color={props.color}/>
      </Sparklines>
  );
}

Upvotes: 0

Views: 296

Answers (1)

Kelly J Andrews
Kelly J Andrews

Reputation: 5111

It has to do with the PropTypes being removed from production.

They have an incredible post explaining all of this - https://facebook.github.io/react/warnings/dont-call-proptypes.html

Here is the general idea -

In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error.

// Not supported!
var error = apiShape(json, 'response');

They suggest looking at the stack trace for the exact location of the call to PropTypes api -

Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call.

The post also provide a suggestion to fix false positives -

If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that it passes to detect manual PropTypes calls.

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName) {
    if (props[propName] != null) {
      const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName);
  };
}

You can fix the above code using ...rest in the function - see below - 

export default function deprecated(propType, explanation) {
  return function validate(props, propName, componentName, ...rest) { // Note ...rest here
    if (props[propName] != null) {
      const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
      if (!warned[message]) {
        warning(false, message);
        warned[message] = true;
      }
    }

    return propType(props, propName, componentName, ...rest); // and here
  };
}

So this might be with the Sparklines lib directly, or in your code somewhere. Can't say without the full stack trace, but this should get you closer to solving the issue.

Upvotes: 2

Related Questions