Skip to content

React error #300 after login (component type invalid) #76

Description

@morbidsteve

Problem

After clicking any "LOG IN AS" button on the user selection screen, the app crashes with:

Minified React error #300: Element type is invalid: expected a string 
(for built-in components) or a class/function but got: undefined

The error originates in LoginPage-vtcKBA7m.js and the component stack shows it occurs during the transition from LoginPage to the post-login dashboard view.

What Works

  • User selection screen renders correctly
  • Backend API is fully functional (/api/v1/auth/demo-users, /api/v1/auth/login, /health all respond)
  • All lazy-loaded JS chunks exist and load (200 status, correct sizes)
  • No CSP violations
  • No network failures

What Fails

  • After login() succeeds and React Router navigates to /dashboard, a lazy-loaded component in the route tree returns undefined instead of a valid React component
  • This happens in both SRE deployment and likely in the production Docker build (same JS assets)

Steps to Reproduce

  1. Open the app
  2. Click any "LOG IN AS" button
  3. App crashes with "SOMETHING WENT WRONG" error boundary

Likely Cause

A component imported via React.lazy() in App.tsx resolves to undefined. This typically happens when:

  • A module uses export default but the lazy import expects named export (or vice versa)
  • A dependency is missing from the production build
  • A circular import causes a module to evaluate to undefined

Environment

  • Frontend: nginx-sre.conf on port 8080
  • Backend: FastAPI on port 8000, all routes registered (342 routes)
  • Database: PostgreSQL with PostGIS, fully seeded
  • Tested via Playwright on Chromium

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions