Invalid Hook Call useChat in React Native Expo

Help
,
1

Current Behavior

  • Getting “Invalid hook call” error when using useChat hook from Vercel AI SDK
  • Error: “Cannot read property ‘useState’ of null”
  • Hook is failing to initialize properly in the React Native environment
    image
    image368×819 47 KB

Expected Behavior

  • useChat hook should properly initialize and provide chat functionality
  • Should work within React Native Expo component structure

Code Causing the Issue

const { messages, error, handleInputChange, input, handleSubmit } = useChat({
fetch: expoFetch as unknown as typeof globalThis.fetch,
api: generateAPIUrl(‘/api/chat’),
onError: (error) => console.error(error, ‘ERROR’),
});

Project Information

  • Framework: React Native with Expo
  • Using Vercel AI SDK for chat functionality
  • File: /home/rinz/Desktop/FutureU/RN/app/(app)/home.tsx
  • Component Stack shows this is within a complex navigation structure using React Navigation
  • Current ui / backend code is same as this guide Getting Started: Expo
2

The code you’ve provided matches the docs (which provides a working example) so my best guess is mismatching versions. Can you make sure

  • npm ls ai is 3.1 or better
  • npm ls expo is 52 or better
  • npm ls react react-native returns only a single version of each
  • npm ls react-dom does not return anything. If it does, see what module is using it and whether you actually need it

If all of those seem right then we’ll need to see some more code or a minimal reproduction to debug further

1 Like