【ES6/React】Assign arrow function to a variable before exporting as module default import/no-anonymous-default-exportの解消方法

今回はReact開発の際に発生する警告「Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export」の解消方法について解説したいと思います。

Reactのコードを用いて解説していますが、ES6で発生する警告になります。

この記事の内容

【結論】エラー解決方法
より具体的に
まとめ
参考

【結論】エラー解決方法

このエラー解決方法としては、「export default」と変数宣言は同時に行わないことです。今回の場合で言うと、「export default」とアロー関数を分けることで解消できます。

// エラー解消前

export default (state = {}, action) => {
  switch (action.type) {
    case READ_EVENTS:
      return state;
    default:
      return state;
  }
};

// エラー解消後

const switchEvents = (state = {}, action) => {
  switch (action.type) {
    case READ_EVENTS:
      return state;
    default:
      return state;
  }
};

export default switchEvents;

より具体的に

「export default」と変数宣言を同時に行うコードは無効な構文になります。

例えば変数a/b/cを宣言し、exportするような以下の構文はNGです。

export default var a, b, c;

なぜNGなのでしょうか。

「export default構文」はdefaultという変数を既に定義しているため、これは2重で変数宣言していることになってしまうためです。

using the export default syntax already creates a variable called default that needs to contain a value or reference.
export default構文を使用すると、値または参照を含める必要があるdefaultという変数がすでに作成されているということになります。
参考：cannot export const arrow function

この解決方法としては、変数をexportすることです。

// エラー修正後

const Todo = () => {};
export default Todo;

このように記述することで「Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export」という警告文が表示されなくなると思います。

「export default」と変数宣言は同時にはできないということを覚えておきましょう。

まとめ

エラー解決方法としては、「export default」と変数宣言は同時に行わないこと
「export default構文」はdefaultという変数を既に定義している

参考

今回はReact開発の際に発生する警告「Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export」の解消方法について解説しました。ES6の復習になれば幸いです。

React