npm start启动React项目编译失败 报react/react-in-jsx-scope错误

问题根因 #

该报错触发逻辑是ESLint检测到文件中使用了JSX语法，但未检索到作用域内的React导入。代码中已经写了React导入语句仍报错，通常是两类原因：ESLint规则未适配React 17+的新JSX转换特性，或是代码存在意外断行导致模块解析异常。

修复步骤 #

• 第一步：修复代码中的断行错误
  你提供的代码里有两处导入语句被意外折行，会直接导致模块解析失败，连带触发JSX作用域校验报错：

  1. 合并@material-ui/core的折行导入：

  // 修正前
  import { makeStyles, CssBaseline, createMuiTheme, ThemeProvider 
  } from '@material-ui/core';
  // 修正后
  import { makeStyles, CssBaseline, createMuiTheme, ThemeProvider } from '@material-ui/core';
  

  2. 合并react-router-dom的折行导入（注意当前代码把包名错误拆成了两行）：

  // 修正前
  import {BrowserRouter as Router, Route, Routes} from "react- 
  router-dom";
  // 修正后
  import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
  

• 第二步：适配新版React JSX转换规则
  React 17及以上版本内置了自动JSX运行时，不需要手动在每个文件顶部导入React，旧版ESLint规则会误报，直接在ESLint配置中关闭过时校验即可：
  找到项目中的ESLint配置（可以是.eslintrc/.eslintrc.js文件，或是package.json中的eslintConfig字段），在rules节点添加如下配置：

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

  如果是Create React App创建的项目，将react-scripts升级到4.0以上版本，会默认适配该特性，无需手动修改配置。

• 第三步：依赖异常修复
  如果以上操作后仍报错，删除本地依赖文件夹和锁文件后重新安装即可：

  rm -rf node_modules package-lock.json yarn.lock
  npm install
  

  重新执行npm start启动项目，编译即可恢复正常。

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