eslint-plugin-react をアップデートしたら、 emotion 関係のエラーが多発した件

Next.js, emotion で開発しているプロダクトの、 eslint-plugin-react をアップデートしたら、めっちゃ ESLint に怒られましたので、どのように対処したのかを書いていきます。

最近アップデートしようとして苦しんでいる方や、
今後、 emotion, eslint-plugin-react を組み合わせて使う方の参考になればと思います。

ではいきましょう！

前提

アップデート前のバージョン

react               18.2.0
next                12.2.4
@emotion/react      11.10.0
eslint              8.21.0
eslint-plugin-react 7.30.1

アップデート後のバージョン

react               18.2.0
next                12.2.5
@emotion/react      11.10.0
eslint              8.23.0
eslint-plugin-react 7.31.6

現象

アップデート後に、いつものように ESLint を実行すると、次のようなエラーが至る場所で発生しました。

Error: Unknown property 'css' found  react/no-unknown-property

原因

直接的な原因は、 emotion を使う際に、下記のように、 css という prop を使うからです。

const SomeComponent = () => {
  return (
    <div css={{ padding: "10px" }}>
      This is SomeComponent.
    </div>
  )
}

本来、 div には css という prop はありませんので、このようなエラーが出るわけです。

なぜアップデート後にエラーが

とはいえ、なぜアップデート後に急にエラーが出るようになったのか、気になりますよね。
そこで、 eslint-plugin-react の CHANGELOG を見ると、ここ最近、 no-unknown-property にかんするアップデートが活発に行われていることがわかります。
なので、 no-unknown-property ルールがより厳密に判定されるようになったのではないかと推測できます。
（まだちゃんと内容見れていないので推測になります。詳しい方、教えてください ）

対処

というわけで、 no-unknown-property ルールにて、 css prop を無視するように設定すれば良さそうです。
そこで、 ESLint 設定ファイルを下記の通り修正します。

.eslintrc.json

  {
    // 略
    "rules": {
      "react/prop-types": "off",
+     "react/no-unknown-property": ["error", { "ignore": ["css"] }]
    }
  }

その後、 ESLint 実行し、エラーが出なくなったことを確認すれば完了です！

✔ No ESLint warnings or errors