javascriptreactjsjscodeshift

javascript transformations failing


I'm trying run jscodeshift against an old react applications. I'm getting the error below.

error

 ERR app/assets/javascripts/components/api_errors/error_body.js.jsx Transformation error (No PropTypes import found!)
Error: No PropTypes import found!
    at addPropTypesImport (/Users/antarr/code/react-codemod/transforms/React-PropTypes-to-prop-types.js:138:11)
    at module.exports (/Users/antarr/code/react-codemod/transforms/React-PropTypes-to-prop-types.js:288:5)

command

jscodeshift -t ../../react-codemod/transforms/React-PropTypes-to-prop-types.js app/assets/javascripts/ --extensions=js,jsx 

app/assets/javascripts/components/api_errors/error_body.js.jsx

"use strict";
class ErrorBody extends React.Component {
  resolveAllErrors() {
    if (!confirm("Are you sure you want to do this?")) return;

    const { reason } = this.context.router.getCurrentParams();
    ApiErrorActions.resolveErrorForReason(reason);
  }

  render() {
    const { reason } = this.context.router.getCurrentParams();
    let destroyButton;
    if (reason) {
      destroyButton = <button className="btn btn-danger" onClick={this.resolveAllErrors} >Resolve All</button>
    }

    return (
      <div className="error-body col-md-9 col-xs-12 panel panel-default">
        <div className="error-body-header panel-heading">
          <div className="col-xs-2">
            {destroyButton}
          </div>
          <div className="col-xs-10">
            {reason}
          </div>
        </div>
        <ErrorBodyList reason={reason} errors={this.props.errors} />
        <ErrorBodyContent />
      </div>
    )
  }
}

ErrorBody.propTypes = {
  errors: React.PropTypes.array.isRequired
};

ErrorBody.contextTypes = {
  router: React.PropTypes.func,
};


Solution

  • In error_body.js.jsx import PropTypes like below:

    import PropTypes from "prop-types";
    ...
    

    and React.PropTypes has moved into a different package since React v15.5. So change propType definition like below:

    ErrorBody.propTypes = {
      errors: PropTypes.array.isRequired
    };
    
    ErrorBody.contextTypes = {
      router: PropTypes.func,
    };