babel実行時に「Support for the experimental syntax 'objectRestSpread' isn't currently enabled」と言われる場合の対応方法

概要

古いパッケージをアップデートしたところビルド時にSupport for the experimental syntax 'classProperties' isn't currently enabledというエラーが出るようになったので対応方法を調べました．

ERROR in ./src/options/icons/clear.svg
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\hoge\src\options\icons\clear.svg: Support for the experimental syntax 'objectRestSpread' isn't currently enabled (6:3):

  4 | export default (({
  5 |   styles = {},
> 6 |   ...props
    |   ^
  7 | }) => React.createElement("svg", _extends({
  8 |   xmlns: "http://www.w3.org/2000/svg",
  9 |   viewBox: "0 0 24 24",

Add @babel/plugin-proposal-object-rest-spread (https://git.io/vb4Ss) to the 'plugins' section of your Babel config to enable transformation.

対応方法

1.　@babel/plugin-proposal-object-rest-spreadをインストール

npm install -D @babel/plugin-proposal-object-rest-spread

2.　babel.config.jsに次のように記述

babel.config.js

module.exports = {
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

.babelrcに記述しても効果がないので注意．
.babelrcやwebpack.config.jsでbabelの設定をしている場合でも上の内容はbabel.config.jsに記述する必要がある．

.babelrc・webpack.config.jsとbabel.config.jsは併用できるが，設定が分散するのが嫌な場合はbabel.config.jsにまとめるとよい．

• .babelrcから設定を移す場合
  .babelrcをbabel.config.jsにリネームして上の内容を追記

• webpack.config.jsから設定を移す場合
  webpack.config.js内のqueryキーで指定したbabel設定をbabel.config.jsに記述し上の内容を追記 (参考:webpackで.babelrcっているんだっけ？ - 30歳SIerからWEBエンジニアで奮闘)

環境

node: v8.11.4
@babel/core: 7.6.4
@babel/plugin-proposal-object-rest-spread: 7.6.2
react-svg-loader: 3.0.3

参考

https://github.com/babel/babel/issues/6970
https://github.com/babel/babel/issues/7879