如何修復React Must Be in Scope When Using JSX錯誤

使用 React 有時會很棘手，尤其是在處理不容易理解的錯誤時。

開發人員可能會遇到的一個常見錯誤是 React must be in scope when using JSX 錯誤。如果在使用 JSX 語法的元件中沒有正確匯入或初始化 React，就會出現這種錯誤。

在本文中，我們將討論導致該錯誤的原因，並提供如何修復該錯誤的解決方案。

React must be in scope when using JSX錯誤的原因是什麼？

JSX（JavaScript XML）是一種語法擴充套件，允許您在 JavaScript 中編寫類似 HTML 的程式碼。瀏覽器不理解 JSX，但像 Create React App 這樣的預配置工具包在引擎蓋下包含了一個 JSX 轉換工具，可以將 JSX 程式碼轉換為有效的 JavaScript 程式碼，瀏覽器可以解釋這些程式碼。

在 17.0 之前的 React 版本中，JSX 轉換器會在編譯時將 JSX 轉換為 React.createElement() 函式呼叫。這需要匯入 React 才能使用 React 元素。在 React v17.0 中引入了新的 JSX 轉換後，React 包的新入口點中的特殊函式將被自動匯入，從而無需在每個顯式使用 JSX 的檔案中匯入 React。

舉例來說，讓我們來看看下面的功能元件：

function App() {
return <h1>Welcome to WBOLT!</h1>;
}

在編譯時，它會被轉換成普通的 JavaScript：

function App() {
return React.createElement('h1', null, 'Welcome to WBOLT!');
}

由於 React 是未定義的，因此在使用 jsx 時總會出現 “‘react’ must be in scope when using jsx” 的錯誤。

修復react must be in scope when using jsx錯誤的 2 種方法

根據您使用的 React 版本，有幾種方法可以修復此錯誤。

• React v17 之前歷史版本
• React v17 及更高版本

1. 包含或更正 React 匯入宣告（針對 React v17 之前版本的修復）

如果您使用的是舊版本的 React，則可能缺少 “react” 的匯入語句或匯入語句不正確。請確保檔案頂部有正確的匯入語句（”React” 上有大寫的 “R”）：

// Wrong ❌
import react  from 'react';
// Correct ✅
import React  from 'react';

將功能元件轉換為普通 JavaScript 後，就會變成這樣：

import React  from 'react';
function App() {
return React.createElement('h1', null, 'Welcome to WBOLT!');
}

2. 更新 ESLint 配置（針對 React v17 及更高版本的修復）

在 React v17.0 中，引入了新的 JSX 轉換，它會自動從 React 包的新入口匯入特殊函式，從而無需在每個顯式使用 JSX 的檔案中匯入 React。

例如，下面是一個功能元件：

function App() {
return <h1>Welcome to WBOLT!</h1>;
}

這就是新的 JSX 轉換編譯成的內容：

// Inserted by a compiler (don't import it yourself!)
import {jsx as _jsx} from 'react/jsx-runtime';
function App() {
return _jsx('h1', { children: 'Welcome to WBOLT!' });
}

這意味著您不再需要在元件中匯入 React 以使用 JSX。如果您在檢查 package.json 檔案以確認 React 版本後仍然收到此錯誤，則必須更新 ESLint 配置。

在這個階段，從技術上講，這不再是 React 錯誤，而是 ESLint 錯誤。

注：您經常會在 React 專案中使用 ESLint 等執行緒工具，因為它會檢查您的程式碼以檢測潛在的錯誤，這些錯誤可能會在現在或將來破壞您的程式碼。該工具會在檢測到檔案周圍有任何 JSX 時強制您匯入 React。

如果您確定自己的 React 版本是 v17.0 或更高，那麼就可以安全地禁用確保您在 React 中使用 JSX 時匯入 React 的規則。

更新 ESLint 配置有兩種主要方式。如果你有 .eslintrc.js 或 .eslintrc.json 檔案。在 .eslintrc.js 檔案中新增以下規則。

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

否則，你可以更新 package.json 檔案中的 eslintConfig 物件：

{
"name": "quotes-circle",
// ...
"dependencies": {
// ...
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"rules": {
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
},
}

在上面的程式碼中，react-in-jsx-scope 規則已關閉，因此 ESLint 不會在你匯入 React 失敗時丟擲錯誤。

至此，你應該已經徹底解決了 “‘react’ must be in scope when using jsx” 的錯誤。但也有可能因為某些原因，錯誤仍然存在。

讓我們再看看幾種修復方法。

修復react must be in scope when using jsx錯誤的其他3種方法

假設錯誤仍然存在。以下是解決 “‘react’ must be in scope when using jsx” 錯誤的另外三種方法。

1. 更新 React-Scripts 的版本

在終端執行以下命令即可更新專案的 react-scripts 版本：

// npm
npm install react-scripts@latest
// yarn
yarn add react-scripts@latest

2. 刪除 Node_modules 資料夾和 package-lock.json 檔案

如果錯誤仍然存在，則可能是某些依賴項安裝錯誤。你可以刪除 node_modules 資料夾和 package-lock.json 檔案（不是 package.json）來解決這個問題。然後執行以下命令重新安裝軟體包：

npm install

然後重啟開發伺服器。

3. 更新 React 和 React-Dom 的版本

最後，如果錯誤仍然存在，請使用下面的命令更新 react 和 react-dom 的版本：

// npm
npm install react@latest react-dom@latest
// if you use TypeScript
npm install --save-dev @types/react@latest @types/react-dom@latest
// OR
// Yarn
yarn add react@latest react-dom@latest
// if you use TypeScript
yarn add @types/react@latest @types/react-dom@latest --dev

目前可以肯定的是，這一錯誤將得到修復。

小結

“React must be in scope when using JSX” 錯誤是開發人員在使用 React 時可能遇到的常見問題。當檔案中使用了 JSX 語法，但未正確匯入或包含 React 庫時，此錯誤主要發生在 React v17 的早期版本中。在 React v17 的較高版本中，當 ESLint 配置出錯或 node_modules 資料夾中的某些依賴項安裝錯誤時，也會出現該錯誤。

根據您正在使用的 React 版本，您可以使用不同的方法來修復此錯誤，我們在文章中對此進行了概述。

現在輪到你了： 您遇到過這個問題嗎？你是如何解決的？你還使用過本文未涉及的其他方法嗎？請在評論中告訴我們！