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,
};
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,
};