Vite版React应用中useContext失效，报AuthContext未定义错误

出现ReferenceError: AuthContext is not defined的核心原因是消费组件（SomeComponent）无法访问到你在App.js中创建的AuthContext变量，和Provider是否正确传递上下文无关（这也是为什么React DevTools能看到上下文已提供的原因）。常见的错误场景及修复方式如下：

1. AuthContext未导出或未正确导入 #

你在App.js中创建了AuthContext，但如果没有将其导出，或者SomeComponent中没有正确导入这个Context，就会触发未定义错误。

修复步骤： #

• 在App.js中导出AuthContext：

  // App.js
  import { createContext } from 'react';
  import SomeComponent from './SomeComponent';
  
  // 命名导出AuthContext，让其他组件能导入
  export const AuthContext = createContext(null);
  
  function App() {
    const authState = { user: 'test', isLoggedIn: true }; // 示例上下文数据
    return (
      <AuthContext.Provider value={authState}>
        <SomeComponent />
      </AuthContext.Provider>
    );
  }
  
  export default App;
  

• 在SomeComponent中导入AuthContext：

  // SomeComponent.js
  import { useContext } from 'react';
  // 根据文件路径正确导入，比如和App.js同目录就用./App
  import { AuthContext } from './App';
  
  function SomeComponent() {
    const auth = useContext(AuthContext);
    return <div>当前用户：{auth.user}</div>;
  }
  
  export default SomeComponent;
  

2. AuthContext定义在组件局部作用域内 #

如果把AuthContext的创建放在App组件的内部，那么这个Context只能在App组件内部访问，外部的SomeComponent根本找不到它。

错误示例： #

// App.js - 错误写法
import { createContext } from 'react';

function App() {
  // 这里创建的AuthContext属于App组件的局部变量，外部组件无法访问
  const AuthContext = createContext(null);
  return (
    <AuthContext.Provider value={...}>
      <SomeComponent />
    </AuthContext.Provider>
  );
}

修复方式： #

将AuthContext的创建移到App组件的外部，再导出即可（参考上面的正确示例）。

3. 导出与导入方式不匹配 #

如果App.js中用默认导出AuthContext，但SomeComponent中用了命名导入，或者反过来，也会导致找不到变量。

错误示例： #

// App.js - 默认导出
const AuthContext = createContext(null);
export default AuthContext;

// SomeComponent.js - 错误的命名导入
import { AuthContext } from './App';

修复方式： #

统一导出导入方式：要么都用命名导出/导入，要么都用默认导出/导入。比如改成默认导入：

// SomeComponent.js
import AuthContext from './App';

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