ReactのJSXでスプレッド属性を使おうとするとsyntax errorが出る対処法


Rails5.1のwebpakcerを使って、Reactの勉強をしているのですが、スプレッド属性を使ったときのコンパイルでSyntax errorが出ました。

21:42:08 hot.1  | ERROR in ./app/javascript/packs/hello_react.jsx
21:42:08 hot.1  | Module build failed: SyntaxError: Unexpected token (98:16)
21:42:08 hot.1  |
21:42:08 hot.1  |    96 |
21:42:08 hot.1  |    97 | ReactDOM.render(
21:42:08 hot.1  | >  98 |   <h2 style = {{...myStyle}}>
21:42:08 hot.1  |       |                 ^
21:42:08 hot.1  |    99 |     Let's Spread!
21:42:08 hot.1  |   100 |   </h2>,
21:42:08 hot.1  |   101 |   document.getElementById('container')

何度も確認して記述ミスはなかったのですが、どうやらbabelのpluginが必要みたいでした。

babel-plugin-transform-object-rest-spreadのインストール

$ yarn add babel-plugin-transform-object-rest-spread
  "plugins": [
    "transform-object-rest-spread"
    ]

これだけで治りました。