Cannot read properties of null (reading 'useState')

[johnnytsunamixv]

Summary

I'm new to coding anything, some knowledge but not much. I'm trying to just create a login page connecting supabase and I keep getting this error. ChatGPT says i'm veering off too much and suggested I post here. BTW this is my first post, I'm just learning

Additional information

No response

Example

No response

[icyJoseph]

Curious about step 3 here? why are you doing that?

[yohannzapata]

The useState error is coming from @supabase/auth-ui-react loading its own React copy, which matches the stack trace.

I’d remove the webpack React alias/transpilation workaround and first make sure react and react-dom are on matching versions. The Auth UI package itself has had this exact useState/React-version problem

[delt4-haze]

This error usually happens in Next.js (App Router) when a Client Component or a library that uses React hooks (like @supabase/auth-ui-react) is being rendered inside a Server Component.

Here are two solutions to fix it:

1. Add 'use client' directive

Make sure the file where you render the Supabase Auth UI component has 'use client'; at the very top:

'use client';

import { Auth } from '@supabase/auth-ui-react';
import { ThemeSass } from '@supabase/auth-ui-shared';
// ... rest of your code

[DYNOSuprovo]

In the Next.js App Router (the app/ directory), components are Server Components by default. Server Components cannot use React client hooks like useState, useEffect, or browser event handlers (onClick, onSubmit).

The Fix: Add 'use client';

Add 'use client'; as the very first line of your login component file:

'use client'; // <-- Must be the very first line before imports

import { useState } from 'react';
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';

export default function LoginPage() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  // ... rest of your component
}

Once you declare 'use client';, Next.js compiles the component as a Client Component where useState works as expected.

Hope this helps! If this resolves your question, please feel free to mark this as the accepted answer.

[Icaro0310]

This error usually means useState is running in a Server Component. In the App Router, files under app/ are server by default, and React hooks only work in client components.

Put this as the very first line of the file that calls useState, or move the form into components/LoginForm.tsx and render it from app/login/page.tsx:

'use client'

import { useState } from 'react'

Also make sure useState is inside the component function, not at module top level. If it's already a client component, run npm ls react react-dom and look for two React copies.

—
More of my work lives here: github.com/Icaro0310 · Website: icaro0310.github.io