「React’ must be in scope when using JSXeslintreact/react-in-jsx-scope」というエラーは、JSXを使用する際にReactがスコープ内にないことを示しています。これは、JSXを変換するためにReactの関数が必要であることに関連しています。このエラーを解決するには、いくつかの方法があります。
目次
方法1: Reactをインポートする
JSXを使用するファイルの先頭で明示的にReactをインポートします。これが最も一般的な解決策です。
|
1 2 3 4 5 6 7 |
import React from 'react'; // その後、JSXを使用 const MyComponent = () => ( <div>Hello, World!</div> ); |
方法2: React 17以降を使用している場合
React 17以降では、新しいJSX変換を使用している場合、Reactをインポートする必要はありません。この新しいJSX変換は、BabelやTypeScriptなどのコンパイラの設定で有効にする必要があります。
Babelを使用している場合、@babel/preset-reactの設定でruntime: 'automatic'を指定することにより、新しいJSX変換を有効にできます。
|
1 2 3 4 5 6 7 8 |
{ "presets": [ ["@babel/preset-react", { "runtime": "automatic" }] ] } |
TypeScriptを使用している場合は、tsconfig.jsonでjsx: 'react-jsx'を指定します。
|
1 2 3 4 5 6 |
{ "compilerOptions": { "jsx": "react-jsx" } } |
方法3: ESLintの設定を変更する
もしReactを明示的にインポートしたくない場合（React 17以降を使用している場合）、ESLintの設定を変更してこのルールを無効にすることもできます。
.eslintrc ファイル（またはESLintの設定が記述されている場所）で、以下のようにルールを無効にします。
|
1 2 3 4 5 |
{ "rules": { "react/react-in-jsx-scope": "off" } } |
これらの方法のいずれかを適用することで、上記のエラーを解決できます。ただし、どの方法を選択するかは、プロジェクトの設定や使用しているReactのバージョンによって異なります。
コメント