gulpでjsxコンパイル時にエラー

解決

babelifyにpresetsを設定する

.transform(babelify.configure({ presets: ["@babel/react","@babel/preset-env"] }))

React.js - webpack4で構築、jsx内でReactの記述が使えない｜teratail

node.js - Cannot find module babel-preset-es2015 - Stack Overflow

事象

参考記事を読み進めていたが、gulpを実行すると下記のエラーが発生する。

• React.js + Babel + Browserify + gulp の環境を作ってみた - Qiita
• Node + React.js + gulpで快適コーディング - Qiita

Error : /path/to/src/assets/js/babel/app.jsx: Unexpected token (26:6) 24 | render: function() { 25 | return ( > 26 | <div> | ^ 27 | <input type="text" value={this.state.person.name} onChange={this.handleChange} /> 28 | <Message name={this.state.person.name} age={this.state.person.age} /> 29 | </div> while parsing file: /Users/kishira_takuya/myspace/passworder.js/src/assets/js/babel/app.jsx