Webpackでchristianalfoni/formsy-react:を使ったReactアプリケーションのビルド中に次のエラーが発生しました。
Property object of JSXMemberExpression expected node to be of a type ["JSXMemberExpression","JSXIdentifier"] but instead got "MemberExpression"
formsy-reactのREADME#How to useにある<Formsy.Form~
のシンタックスが原因だったため、How to Useの次のコードを、
import Formsy from 'formsy-react';
const MyAppForm = React.createClass({
getInitialState() {
return {
canSubmit: false
}
},
enableButton() {
this.setState({
canSubmit: true
});
},
disableButton() {
this.setState({
canSubmit: false
});
},
submit(model) {
someDep.saveEmail(model.email);
},
render() {
return (
<Formsy.Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
<MyOwnInput name="email" validations="isEmail" validationError="This is not a valid email" required/>
<button type="submit" disabled={!this.state.canSubmit}>Submit</button>
</Formsy.Form>
);
}
});
次のように変更すると解決しました。
// Formもインポート
import Formsy, {Form} from 'formsy-react';
const MyAppForm = React.createClass({
getInitialState() {
return {
canSubmit: false
}
},
enableButton() {
this.setState({
canSubmit: true
});
},
disableButton() {
this.setState({
canSubmit: false
});
},
submit(model) {
someDep.saveEmail(model.email);
},
render() {
return (
// Formsy.Form -> Formに変更
<Form onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
<MyOwnInput name="email" validations="isEmail" validationError="This is not a valid email" required/>
<button type="submit" disabled={!this.state.canSubmit}>Submit</button>
</Form>
);
}
});