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