CODEWITHSUNDEEP
javascriptreactjsbabeljs
Moon soon
Moon soon

Reputation: 2856

Disable React.createClass and PropTypes deprecated warnings in babel react present

At latest React 15.5.1 package, If using babel react present to resolve jsx file, will appears following warnings:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

warning.js:36 Warning: A Component: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

My code is following:

import React from 'react'
import ReactDOM from 'react-dom';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 1
    }
  }
  componentDidMount() {
    setInterval( ()=> {
      this.setState((prevState, props) => ({
        count: prevState.count + 1
      }))
    }, 1000)
  }
  render(){
    return (
      <h1>{this.state.count}</h1>
    )
  }
}

const root = document.createElement('div');
root.id = 'app';
document.body.appendChild(root);

ReactDOM.render(
  <Counter />,
  document.querySelector('#app')
);

I am not using React.createClass and PropTypes in my code, It seems babel transform my code to React.createClass and PropTypes, How to fix that?

Upvotes: 35

Views: 24904

Answers (6)

davey
davey

Reputation: 1785

This is not an answer, just one more thing to add, as I can not yet comment :-( Maybe someone else have same issue with react-bootstrap

I got the same when using react-bootstrap 0.30.8 together with react 15.5.3.

Warning: Uncontrolled(Dropdown): React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement.

I get in: uncontrollable/createUncontrollable.js ---> 

var component = _react2.default.createClass(_extends({

[email protected] is a dep of react-bootstrap 0.30.8

and

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

react-bootstrap/es/PanelGroup.js ---> 

accordion: React.PropTypes.bool

I think downgrading react is the only way to workaround here, as react-bootstrap is not yet far enough.

Upvotes: 0

Ivo Bosticky
Ivo Bosticky

Reputation: 6408

I found that the warning was present because I was importing React with

import * as React from 'react'

changing this to

import React from 'react'

makes the warnings disappear

Upvotes: 4

Idan Gozlan
Idan Gozlan

Reputation: 3203

React 15.5.0 contain new warnings belong to the changes that are coming on React 16, the warning that you are getting, is actually telling you that you have to implement the new way (since the current way that you are using is going to be deprecated on 16).

React.createClass, you have 2 options, first one is to just use plain JS syntax:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

or use the create-react-class module (availiable on npm):

// Before (15.4 and below)
var React = require('react');

var Component = React.createClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

// After (15.5)
var React = require('react');
var createReactClass = require('create-react-class');

var Component = createReactClass({
  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

About the PropTypes warning, check if you are using module that using PropTypes, sometimes it's coming from external part.

Anyway, to read more about it, you are welcome to get Facebook blog post about those changes

Upvotes: 12

Vituzan Siva
Vituzan Siva

Reputation: 71

React v15.5.0 implements new warnings

Downgrading React to 15.4.x works for me

npm install --save [email protected] [email protected]

Upvotes: 5

Vikas Sardana
Vikas Sardana

Reputation: 1643

React.createClass and React.PropTypes has been deprecated in v15.5.

Some Peers/dependencies must be using React.createClass and React.PropTypes with React:^15.4 (or any other version), which is very much compatible with your react version. So getting Warning for there code.

Please refer this link for 15.5 Changes

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

Upvotes: 4

N. Solomon
N. Solomon

Reputation: 140

You should not be extending react.Component. You need to import Component from react and extend it has shown here:

  import React, {Component} from 'react';

  class Counter extends Component{
  //your code here
  render (){

    return (
       <h1>{this.state.count}</h1>
    );
   }
}

You can read about the differences and ES6 classes here

Upvotes: -4

Related Questions