React コンポーネントで JSX を使用する際の注意点： "React' must be in scope when using JSX react/react-in-jsx-scope ?"

"React' must be in scope when using JSX react/react-in-jsx-scope ?" エラーの詳細解説

このエラーは、React.js コンポーネントで JSX を使用しているときに、React がスコープ内に存在しない場合に発生します。

原因

このエラーが発生する主な原因は 2 つです。

1. React のインポート漏れ:

   • コンポーネントファイルで React をインポートしていない。
   • React を別の名前でインポートしている (例: import R from 'react')。

2. ESLint 設定:

   • ESLint の react/react-in-jsx-scope ルールが有効になっている。
   • react/jsx-runtime または globals オプションが正しく設定されていない。

解決策

React を正しくインポートしていない場合は、以下のコードのようにインポートします。

import React from 'react';

ESLint の設定が原因の場合は、以下の方法で解決できます。

.eslintrc.js ファイルに以下の設定を追加します。

{
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

方法 2: react/jsx-runtime オプションを設定する

{
  "rules": {
    "react/react-in-jsx-scope": "error",
    "react/jsx-runtime": {
      "name": "React"
    }
  }
}

方法 3: globals オプションを設定する

{
  "globals": {
    "React": "writable"
  }
}

補足

• React 17 以降では、import React from 'react' を省略して JSX を使用できます。ただし、ESLint の設定によってはエラーが発生する可能性があります。

// エラーが発生するコード
const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

// 解決策
import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

// .eslintrc.js ファイル

{
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

// .eslintrc.js ファイル

{
  "rules": {
    "react/react-in-jsx-scope": "error",
    "react/jsx-runtime": {
      "name": "React"
    }
  }
}

// .eslintrc.js ファイル

{
  "globals": {
    "React": "writable"
  }
}

その他の解決方法

React をグローバル変数として宣言する

// エラーが発生するコード
window.React = require('react');

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

// 解決策
window.React = React;

const App = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

Babel の transform-react-jsx プラグインを使用する

// .babelrc ファイル

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

Create React App を使用すると、React のインポートや設定を自動的に行ってくれるので、このエラーが発生することはありません。

注意事項

• 上記の方法の中には、推奨されない方法もあります。
• 使用する方法は、プロジェクトの環境や設定によって異なります。

推奨される方法

• 一般的には、React を正しくインポートする方法が推奨されます。
• ESLint を使用している場合は、react/jsx-runtime オプションまたは globals オプションを設定する方法も有効です。