React新项目循环依赖警告及JSX报错问题求助

1. 修复'React' must be in scope when using JSX 报错 #

• 快速临时修复：在/src/components/Employee.js顶部手动导入React

  import React from 'react';
  
  function Employee() {
      return <h3>This is an Employee</h3>;
  }
  export default Employee;
  

• 长期适配React 17+的自动JSX转换：
  React 17及以上版本支持无需手动导入React即可使用JSX，但你的ESLint规则可能未同步更新。按以下步骤调整：
  1. 安装最新版的eslint-plugin-react：

     npm install eslint-plugin-react@latest --save-dev
     

  2. 在项目根目录创建或修改.eslintrc.json文件，添加如下配置：

     {
       "settings": {
         "react": {
           "version": "detect"
         }
       },
       "rules": {
         "react/react-in-jsx-scope": "off"
       }
     }
     

  配置完成后，编写JSX时就无需手动导入React了。

2. 处理循环依赖警告 #

这个警告大多来自react-scripts内部模块的循环引用，不会影响项目正常运行。如果想消除警告：

• 升级react-scripts到最新版本，大概率能修复内部的循环依赖问题：

  npm install react-scripts@latest
  

• 若升级后仍有警告，可修改启动命令忽略警告：
  打开package.json，修改scripts中的start命令：

  "scripts": {
    "start": "react-scripts start --no-warnings",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

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