【Reactの勉強】JSのimport/export時のESLintのエラー対応

前回に引き続き、以下の日本大学文理学部情報科学科の教授の方がクリエイティブ・コモンズで公開してくださっているチュートリアルをやっていく。

今回は「サーバーからのデータ取得」のセクションをやっていたところ、JSのimport/exportの書き方でESLintでエラーが出て対応したのでメモ。

「Reactの勉強」で使用している主なソフトウェアのバージョンは以下の通り。

以下のように書かないとESLintでエラーになった。

具体的なコードは以下

[src/api.ts]

const fetchImages = async (breed: string): Promise<string[]> => {
  // 省略
};
export default fetchImages;

[src/App.js]

import fetchImages from './api';

まず、チュートリアルと同じく以下のように、関数宣言の前にexportをつけると、ESLintで「Prefer default export.」というエラーが出てしまう。

export const fetchImages = async (breed: string): Promise<string[]> => {
  // 省略
};

f:id:kamatimaru:20210126231953p:plain

では、「default」を付ければよいのかというとそういう訳ではなかった。

以下のstack overflowの記事にもあるように、export default constという構文はシンタックスエラーになってしまう。

従って、以下のように、ファイルの最後でexport defaultする必要があった。
こうすると、ESLintのエラーが出なくなる。

const fetchImages = async (breed: string): Promise<string> => {
  // 省略
};
export default fetchImages;

チュートリアルと同じく以下のように、波括弧でモジュールをimportするとESLintで以下のエラーが発生する。

import { fetchImages } from './api';

f:id:kamatimaru:20210126233316p:plain

デフォルトエクスポートされたモジュールをimportする場合は、モジュール名を波括弧で囲ってはいけないらしい。

以下のように波括弧を外すとエラーが消える。

import fetchImages from './api';

以下、Mozillaの公式ドキュメント
developer.mozilla.org

以上

delhi09の勉強日記