React 18注释import React仍报错，是否必须导入该模块？

是否必须导入React？ #

React 17及以后的JSX转换规则确实允许你在使用普通JSX组件时不手动导入React，但如果代码里直接引用了React变量（比如<React.StrictMode>、React.useState这类API），就必须导入React。你这次报错就是因为用了<React.StrictMode>，但没导入React导致ESLint识别不到这个变量。

解决方法 #

方法1：保留React.StrictMode，恢复React导入

直接取消注释导入语句，让代码能找到React变量：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

方法2：移除React.StrictMode，无需导入React

如果不需要严格模式的校验，直接去掉包裹的<React.StrictMode>即可：

// import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <App />
);

方法3：配置ESLint全局识别React（不推荐）

要是既不想导入React，又想保留严格模式，可以在ESLint配置里把React设为只读全局变量：
在.eslintrc.js（或对应的配置文件）中添加：

module.exports = {
  globals: {
    React: 'readonly'
  },
  // 其他原有配置
};

不过这种方式不建议常用，会让代码依赖变得不清晰，后续维护容易出问题。

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