React应用报错'Component' is not defined no-undef，求解决方法

一、修正导入语句 #

先确认你的导入逻辑是否正确，以下是两种可行的写法：

1. 解构导入Component

import React, { Component } from 'react';

class Navbar extends Component {
  // 组件代码
}

2. 直接使用React.Component（无需单独导入Component）

import React from 'react';

class Navbar extends React.Component {
  // 组件代码
}

若使用第二种写法仍报错，检查import React from 'react';语句是否拼写错误，比如误写成'reactjs'。

二、检查文件路径大小写 #

确认App.js中导入Navbar的路径大小写是否与实际文件结构一致。比如实际文件夹是components（小写），但导入时写了./Component/Navbar（大写C），部分大小写敏感的系统（Linux/macOS）会导致文件查找失败，间接触发ESLint错误。修正为正确路径：

// App.js中的导入语句
import Navbar from './components/Navbar';

三、配置ESLint的React支持 #

确保ESLint配置文件（.eslintrc.js/.eslintrc.json）正确配置了React相关规则：

1. 先安装必要插件（未安装的话）：

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

2. 在配置文件中添加插件与JSX支持：

module.exports = {
  plugins: ['react'],
  parserOptions: {
    ecmaVersion: 6,
    ecmaFeatures: {
      jsx: true
    }
  },
  // 其他规则配置
};

四、清理ESLint缓存 #

缓存可能导致错误提示不更新，执行以下命令清理缓存：

npx eslint --cache-clear

也可以重启代码编辑器，让ESLint重新校验所有文件。

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