How to fix useContext(MyContext) returned undefined; is the component inside a Provider? in React

// ❌ WRONG - Consumer is outside Provider
function App() {
  return (
    <>
      <Header />  {/* ❌ Can't access context */}
      <MyContextProvider>
        <Main />
      </MyContextProvider>
    </>
  );
}

// ✅ CORRECT - All consumers inside Provider
function App() {
  return (
    <MyContextProvider>
      <Header />  {/* ✅ Can access context */}
      <Main />
    </MyContextProvider>
  );
}

// src/App.tsx
import { AuthProvider } from './contexts/AuthContext';

function App() {
  return (
    <AuthProvider>
      {/* All components here can access AuthContext */}
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/profile" element={<Profile />} />
        </Routes>
      </Router>
    </AuthProvider>
  );
}

<AuthProvider>
  <ThemeProvider>
    <DataProvider>
      <App />
    </DataProvider>
  </ThemeProvider>
</AuthProvider>

// src/contexts/AuthContext.tsx
import { createContext, useContext, ReactNode } from 'react';

interface AuthContextType {
  user: User | null;
  login: (email: string, password: string) => Promise<void>;
  logout: () => void;
}

// Create context with undefined as initial value
const AuthContext = createContext<AuthContextType | undefined>(undefined);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);

  const value = {
    user,
    login: async (email, password) => { /* ... */ },
    logout: () => setUser(null),
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
}

// Custom hook that throws if used outside Provider
export function useAuth() {
  const context = useContext(AuthContext);

  if (context === undefined) {
    throw new Error('useAuth must be used within an AuthProvider');
  }

  return context;
}

// Option 1: Provide actual default values
const ThemeContext = createContext<ThemeContextType>({
  theme: 'light',
  toggleTheme: () => {
    console.warn('toggleTheme called outside Provider');
  },
});

// Option 2: Make context optional and handle null case
const UserContext = createContext<UserContextType | null>(null);

export function useUser() {
  const context = useContext(UserContext);

  // Allow null, but throw if undefined (wrong context)
  if (context === undefined) {
    throw new Error('useUser must be used within UserProvider');
  }

  return context; // Can be null, which is valid
}

# Check for duplicate imports
npm ls react
# or
pnpm list react

# If you see multiple React versions, dedupe:
npm dedupe
# or
pnpm dedupe

// ❌ DON'T create context in multiple files
// src/contexts/AuthContext.tsx
export const AuthContext = createContext(...);

// src/components/Header.tsx
export const AuthContext = createContext(...); // ❌ Different object!

// ✅ DO import from single source
import { AuthContext } from '@/contexts/AuthContext';