克隆GitHub项目后出现'React must be in scope when using JSX'报错求助

解决方案 #

这个报错的核心原因：旧版ESLint规则默认要求，只要在代码里写JSX，就必须显式导入React；但React 17及以上版本已经支持自动在编译时注入React，不需要手动写import React from 'react'，如果项目的ESLint配置没同步更新，就会触发这个错误。

方法一：快速修复——显式导入React

直接在App.js的最顶部添加React导入语句，这是最简单直接的解决方式：

import React from 'react'; // 新增这一行
import { Routes, Route } from "react-router-dom";
// 其余导入代码保持不变

修改后的完整App.js代码：

import React from 'react';
import { Routes, Route } from "react-router-dom";
import Layout from "./Components/Layout";
import PageNotFound from "./Components/PageNotFound";
import SearchBox from "./Components/SearchBox";
import HomePage from "./Pages/HomePage";
import ProductDetails from "./Pages/ProductDetails";

function App() {
  return (
    <>
      <Routes>
        <Route
          path="/"
          element={
            <>
              <Layout>
                <SearchBox />
                <HomePage />
              </Layout>
            </>
          }
        />
        <Route path="/products/:id" element={<ProductDetails />} />
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </>
  );
}

export default App;

方法二：适配React 17+——关闭ESLint过时规则

如果你的项目使用的是React 17或更高版本，可以修改ESLint配置，关闭这个已经过时的规则：

1. 找到项目根目录下的.eslintrc（或.eslintrc.json）文件，添加规则配置：

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

2. 如果项目是在package.json里配置ESLint，找到eslintConfig字段修改：

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

修改完配置后，重启开发服务器，报错就会消失。

内容的提问来源于stack exchange，提问作者Ahmed Hassan