Edited at

Webpack+React+formsy-reactのビルドでエラー

More than 3 years have passed since last update.

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


参考