'React' must be in scope when using JSX react/react-in-jsx-scope と怒られた時の対応事情

時間がない人用

.eslintrc.cjs

  extends: ['plugin:react/jsx-runtime'],

以前の情報

React は 17 以降に the new JSX transform というものが存在する。

ところが、この時に eslint からひたすら怒られた事はないだろうか。

error  'React' must be in scope when using JSX  react/react-in-jsx-scope

この対策、従来だと eslint の設定をいじるものが多かった。
いじるのは以下の二つ。

.eslintrc.cjs

 'rules': {
    'react/jsx-uses-react': 'off',
    'react/react-in-jsx-scope': 'off'
}

今の eslint-plugin-react

これは最近の eslint-plugin-react で修正が加えられている。

If you are using the new JSX transform from React 17, you should disable this rule by extending react/jsx-runtime in your eslint config (add "plugin:react/jsx-runtime" to "extends").

なので、お手元の eslintrc に extends を一行追加することで対応できる。

.eslintrc.cjs

  extends: ['plugin:react/jsx-runtime'],