🧊

Use before declarationとかいうEdgeのエラー

ReactなプロジェクトでEdgeでだけ動かないケースがあって調べてた。

Expression-body arrow function parameter destructuring "Use before declaration" error when parameter is only used in an inner function · Issue #2606 · Microsoft/ChakraCore · GitHub

これ。
まじ勘弁してほしい。

  • Edge 40.15063.0.0
  • EdgeHTML 15.15063

原因となるコード

Reactやってればだいたいみんな書いてそうなSFCのこれ。

const Foo = ({ mode }) => (
  <div>{mode}</div>
);

`return`とか書かなくてシュッと書けていいですよね。
でもこれがEdgeだと、`mode`って変数が定義前に使われた！！「Use before declaration」！！とか言われる。

Workaround 1

1クッションはさむ。

const Foo = ({ mode }) => {
  return (
    <div>{mode}</div>
  );
};

`return`って書きたくないっつーのに・・。

Workaround 2

Destructuringしない。

const Foo = (props) => (
  <div>{props.mode}</div>
);

ナシではないが全部書き換えるの面倒くさすぎる・・。

Workaround 3

Babelを使う。

  • `preset-es2015`
  • `transform-es2015-arrow-functions`

どっちか。
Arrow functionとDestructuringのどっちが悪いのかは追ってない。

Workaround 4

Edgeを非対応にする。
そのうちなおるやろってことで。