【Reactの勉強】環境構築(ESLintのエラーを解消する)

概要

前回に引き続き、環境構築を行う。
今回はESLintのエラーを解消する。

適宜、以下の本を参考にさせて頂きながら進める。(以下、『りあクト！』)

oukayuka.booth.pm

バージョン

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

node: 15.5.0
react-create-app: 4.0.1
react: 17.0.1
react-dom: 17.0.1
typescript: 4.1.3
eslint: 7.17.0
prettier: 2.2.1

ESLintのエラーを解消する

create-react-appで生成されたコードには、ESLint違反のコードが含まれていた。
ESLintを導入したことによって、以下のようにビルドが失敗するようになってしまったので、ESLintのエラーを解消していく。

f:id:kamatimaru:20210107210357p:plain

出ているエラーは以下の2つである。

'React' was used before it was defined no-use-before-define
Promises must be handled appropriately or explicitly marked as ignored with the `void` operator @typescript-eslint/no-floating-promises

1のエラーについて

App.tsxとindex.tsxの

import React from 'react';

という一文のところで、

'React' was used before it was defined no-use-before-define

というエラーが出ていた。

これに関しては、

根本原因が分からなかった。
以下のようにReact1.7以降ではそもそも、import React from 'react';の一文自体がいらないというような情報もあったが、消してみたらさらにエラーが増えて動かなくなった。

github.com
zenn.dev

というようなことがあったが、とりあえず以下のissueのコメントの通り、.eslintrc.jsのrulesに以下の2行を追加したところエラーを抑制できた。

'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'warn',

github.com

根本原因が分からないのは気持ち悪いが、今はとりあえずチュートリアルを早くやってみたいので、いったんこれでよしとする。

2のエラーについて

reportWebVitals.tsの以下のコードのところで

Promises must be handled appropriately or explicitly marked as ignored with the `void` operator @typescript-eslint/no-floating-promises

というエラーが出ていた。

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
      getCLS(onPerfEntry);
      getFID(onPerfEntry);
      getFCP(onPerfEntry);
      getLCP(onPerfEntry);
      getTTFB(onPerfEntry);
    });
  }
};

これに関しては、以下のstackoverflowにも同じ質問があった。

stackoverflow.com

Promise文を使っているのに最後がcatchで終わっていないという警告のようであり、

thenの後にcatchをつける。
関数の戻り値のtypeにvoidを明示する。

のどちらかで解消するようだった。

2の方で対応しようと思ったが、ES6・TypeScript初心者なので、このコードをみてパッとどこにvoidを書いたら良いのか分からず(このimportの使い方はなんだ？って感じだった。)、VS CodeのQuick Fix機能を使った。

f:id:kamatimaru:20210107212532p:plain

すると、コードが以下のように修正されて、ESLintのエラーも消えた。

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    void import('web-vitals').then(
      ({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
        getCLS(onPerfEntry);
        getFID(onPerfEntry);
        getFCP(onPerfEntry);
        getLCP(onPerfEntry);
        getTTFB(onPerfEntry);
      },
    );
  }
};