0

ReactでIE11向けサイトを作成しているのですが、
Chromeでは使用できるarrow関数がIE11では構文エラーとなってしまいます。

@babel/plugin-transform-arrow-functions はarrow関数をfunctionに変換してくれるプラグインだという認識ですが正しいでしょうか。
buildした際にarrow関数が残ってしまいます。

arrow関数が残ってしまいます。

設定は下記になります。

package.json

  "dependencies": {
    "@babel/runtime": "^7.2.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@fortawesome/react-fontawesome": "^0.1.3",
    "aglio": "^2.3.0",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-daterangepicker": "^3.0.3",
    "echarts": "^4.2.0-rc.2",
    "echarts-for-react": "^2.0.15-beta.0",
    "getstorybook": "^1.7.0",
    "global": "^4.3.2",
    "jquery": "^3.3.1",
    "mobx": "4",
    "mobx-react": "^5.3.6",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "react": "^16.6.1",
    "react-bootstrap-daterangepicker": "^4.1.0",
    "react-content-loader": "^3.4.1",
    "react-dom": "^16.6.1",
    "react-global-configuration": "^1.3.0",
    "react-icons": "^3.2.2",
    "react-loading": "^2.0.3",
    "react-loading-skeleton": "^1.0.0",
    "react-router-dom": "^4.3.1",
    "reactstrap": "^6.5.0"
  },
  "devDependencies": {
    "@babel/core": "^7.1.5",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.2",
    "@babel/plugin-transform-arrow-functions": "^7.2.0",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.1.5",
    "@babel/preset-react": "^7.0.0",
    "@storybook/react": "^4.0.8",
    "babel-loader": "^8.0.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "css-loader": "^1.0.1",
    "ol": "^5.3.0",
    "style-loader": "^0.23.1",
    "styled-components": "^4.1.1",
    "uniqid": "^5.0.3",
    "url-loader": "^1.1.2",
    "uuid": "^3.3.2",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "write-file-webpack-plugin": "^4.4.1"
  },

webpack.config.js

// webpack.confing.js

const path = require('path')
const WriteFilePlugin = require('write-file-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: ['./src/app.js'],
  output: {
    path: path.resolve(__dirname, './'),
    filename: 'public/build.min.js'
  },
  plugins : [
    new WriteFilePlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          babelrc: false,
          presets: [
            ['@babel/preset-env', {
              useBuiltIns : 'usage',
              targets : {
                browsers : [
                  'last 2 versions',
                  'ie >= 11',
                ],
              },
            }],
            '@babel/preset-react',
          ],
          plugins: [
            ['@babel/plugin-proposal-decorators', {
              legacy: true
            }],
            ['@babel/plugin-proposal-class-properties', {
              loose: true
            }],
            ['@babel/plugin-transform-runtime', {
              regenerator : true,
            }],
            ['@babel/plugin-transform-arrow-functions', {
              spec : false,
            }],
          ]
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader?modules']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(pdf|jpg|png|gif|svg|ico)$/,
        use: ['url-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  devServer: {
    contentBase: path.join(__dirname, './public'),
    compress: true,
    port: 9000
  }
}

1 件の回答 1

2

問題はreact-global-configurationが依存しているパッケージであるserialize-javascript内でアロー関数が使用されている点にあります。ご提示のbabel-loaderの設定にexclude: /node_modules/とありますから、node_modules内にある依存モジュールに対してはbabelの処理が行なわれていません。

実は、この問題はserialize-javascript側で昨日修正されました。ですので、以下のコマンドを実行してserialize-javascriptを最新版にアップデートしてからビルドし直すことで解決すると思われます。

npm update serialize-javascript --depth 2

これは余談ですが、@babel/plugin-transform-arrow-functionsは不要ではないかと思います。

今回は@babel/preset-envが使用されており、アロー関数もこれで処理されてしまうためです。

2
  • ありがとうございます。依存パッケージの更新 npm update serialize-javascript --depth 2 で解決しました!
    – Yamada JP
    Commented 2019年1月7日 5:25
  • 補足ですが、 @babel/plugin-transform-arrow-functions を削除しても問題なく処理しておりました。
    – Yamada JP
    Commented 2019年1月7日 7:47

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。