AI & Agent Dev Bug Sandbox Back to Radar

React-User-Management Example App.Jsx Missing Import/Export Sections Causing Module Load Error

The React quickstart example in the Supabase documentation and the GitHub example repo omits the necessary import statements and default export, leading to a runtime Uncaught SyntaxError because main.jsx expects a default export. This is a documentation/code snippet inconsistency introduced by PR #45539.

mediumConfidence 95%React

Origin Analysis

PR #45539 removed the import/export statements from the src/App.jsx file in the react-user-management example, but the README and the consuming main.jsx still expect them. The removed lines are essential for the module to export the App component as default and for the React hooks and Supabase client to be available.

1. Go to https://supabase.com/docs/guides/getting-started/tutorials/with-react#summary-of-the-methods 2. Copy the App.jsx code snippet from the documentation or from commit df35577a 3. Create a new React project (e.g., using Vite) following the tutorial up to that point 4. Replace src/App.jsx with the copied snippet 5. Run npm run dev and open the page 6. Observe in browser console: Uncaught SyntaxError: The requested module '/src/App.jsx?t=...' does not provide an export named 'default' at main.jsx:4:8

Fixing Code Block

import { useState, useEffect } from 'react'
import './App.css'
import { supabase } from './supabaseClient'
import Auth from './Auth'
import Account from './Account'

function App() {
  const [session, setSession] = useState(null)

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session)
    })

    supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session)
    })
  }, [])

  return (
    <div className="container" style={{ padding: '50px 0 100px 0' }}>
      {!session ? <Auth /> : <Account key={session.user.id} session={session} />}
    </div>
  )
}

export default App

Added back the missing import statements for React hooks, CSS, Supabase client, Auth, and Account components, and the default export of the App component. This restores consistency with the README and allows the module to be properly imported by main.jsx.

Edge Case Audit

This fix restores standard imports and export, so it is safe for the current Supabase JS v2 tutorial. However, if you have customized your App.jsx, applying this exact code will overwrite your changes. Ensure your project uses @supabase/supabase-js v2 or later; the tutorial's `supabase.auth.getSession()` and `onAuthStateChange` are not compatible with v1. The import paths (`./supabaseClient`, `./Auth`, `./Account`) must match your file structure. Rollback: replace App.jsx with the previous content or revert the commit. No concurrency or threading issues.