Fix TypeError: Cannot read properties of undefined (reading 'user') in React

This error happens when you call useContext and access a property but the component is not wrapped in the corresponding Context Provider. Without a Provider, the context value is the default (often undefined). Fix it by wrapping the consuming component tree in the correct Provider or by supplying a meaningful default value when creating the context.

Reading the Stack Trace

Here's what each line means:

• at ProfileHeader (webpack-internal:///./src/components/ProfileHeader.tsx:9:24): ProfileHeader accesses context.user at line 9, but the context value is undefined because no Provider wraps this component.
• at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18): React's hook rendering pipeline is executing useContext, which returns the default value since no Provider is found.
• at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:20069:13): The component is being mounted for the first time, and the missing Provider causes the immediate crash.

Common Causes

const AuthContext = createContext();

function ProfileHeader() {
  const { user } = useContext(AuthContext);
  return <h1>Hello, {user.name}</h1>;
}

// Missing AuthContext.Provider in the component tree
export default function App() {
  return <ProfileHeader />;
}

export default function App() {
  const [auth, setAuth] = useState(undefined);
  return (
    <AuthContext.Provider value={auth}>
      <ProfileHeader />
    </AuthContext.Provider>
  );
}

// AuthContext.ts - exports AuthContext
// ProfileHeader.tsx imports from wrong file
import { AuthContext } from './OldAuthContext';

function ProfileHeader() {
  const { user } = useContext(AuthContext);
  return <h1>{user.name}</h1>;
}

The Fix

Wrap the consuming component in the AuthContext.Provider and pass a valid value. Also add a null check in the consumer so it gracefully handles the case where the Provider is missing or the value is not yet available.

const AuthContext = createContext();

function ProfileHeader() {
  const { user } = useContext(AuthContext);
  return <h1>Hello, {user.name}</h1>;
}

export default function App() {
  return <ProfileHeader />;
}

const AuthContext = createContext<{ user: { name: string } } | null>(null);

function ProfileHeader() {
  const auth = useContext(AuthContext);
  if (!auth) {
    return <p>Please log in.</p>;
  }
  return <h1>Hello, {auth.user.name}</h1>;
}

export default function App() {
  const user = { name: 'Alice' };
  return (
    <AuthContext.Provider value={{ user }}>
      <ProfileHeader />
    </AuthContext.Provider>
  );
}

Testing the Fix

import { render, screen } from '@testing-library/react';
import { AuthContext } from './AuthContext';
import ProfileHeader from './ProfileHeader';

describe('ProfileHeader', () => {
  it('renders fallback when context is null', () => {
    render(<ProfileHeader />);
    expect(screen.getByText('Please log in.')).toBeInTheDocument();
  });

  it('renders user name when context is provided', () => {
    render(
      <AuthContext.Provider value={{ user: { name: 'Alice' } }}>
        <ProfileHeader />
      </AuthContext.Provider>
    );
    expect(screen.getByText('Hello, Alice')).toBeInTheDocument();
  });

  it('does not crash without a Provider', () => {
    expect(() => render(<ProfileHeader />)).not.toThrow();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/react-context-undefined,git add src/components/ProfileHeader.tsx src/context/AuthContext.tsx src/components/__tests__/ProfileHeader.test.tsx,git commit -m "fix: add Provider wrapper and null guard for AuthContext",git push origin fix/react-context-undefined

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Run the test suite locally to confirm context rendering works.
2. Open a pull request with the Provider and null guard changes.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and verify the component renders correctly in staging.

Frequently Asked Questions