React Native Unhandled promise rejection | React-Native, Async,

Question

I keep getting an Unhandled Promise Rejection
I'm Running React-Native with the EXPO CLI and am using React Hook Forms

Things I've tried and nothing has changed:

1. Gave my api (NodeJS) an SSL (I know ios wants one)
2. Refactored to regular and react hooks for each field
3. Changed the BaseUrl to 10.0.2.2 AND THEN TRIED my personal IP address.
4. Changed to normal Promise AND THEN TRIED Axios calls

The console log just inside the onSubmit function returns the data from the form, but it stops there.

The Full Error:

[Unhandled promise rejection: TypeError: (0, _auth.loginUser) is not a function. (In '(0, _auth.loginUser)(data)', '(0, _auth.loginUser)' is undefined)] at node_modules/react-hook-form/dist/index.cjs.development.js:1204:67 in at [native code]:null in flushedQueue at [native code]:null in callFunctionReturnFlushedQueue

Login Component Code:

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';

import Input from '../Input';
import Button from '../Button';
import Link from '../Link';
import { useForm, Controller } from "react-hook-form";
import { loginUser } from '../../helpers/data/auth';

const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

export default function Login() {
  const { control, handleSubmit, errors } = useForm();

  const onSubmit = async (data) => {
    console.log(data)
    let response = await loginUser(data)
    if (response.status >= 200 && response.status < 300) {
      console.log(response)
    } else {
      error
    }
  }

  return (
    <View style={styles.container}>

      <Controller
        control={control}
        name="email"
        defaultValue=''
        rules={{
          required: {value: true, message: 'Email is required' },
          pattern: {
            value: EMAIL_REGEX,
            message: 'Not a valid email'
          }
        }}
        render={({ onChange, onBlur, value }) => (
        <Input
          error={errors.email}
          errorText={errors?.email?.message}
          onBlur={onBlur}
          onChangeText={value => onChange(value)}
          value={value}
          placeholder={'Email'}
          textAlign={'center'}
        />
        )}
      />

      <Controller
        control={control}
        name="password"
        defaultValue=''
        rules={{ required: {value: true, message: 'Password is required' } }}
        render={({ onChange, onBlur, value }) => (
          <Input
            error={errors.password}
            errorText={errors?.password?.message}
            onBlur={onBlur}
            onChangeText={value => onChange(value)}
            value={value}
            secureTextEntry={true}
            placeholder={'Password'}
            textAlign={'center'}
          />
        )}
      />
      <Button onPress={handleSubmit(onSubmit)} label="LOGIN"/>

      <View style={styles.row}>
        <Text style={styles.text}>Forgot your login details? </Text>
        <Link onPress={() => {}} label='Get help signing in.'/>
      </View>

    </View>
  )
}

loginUser Fetch Call:

import { baseUrl } from '../apiKeys.json';

const loginUser = async (data) => {
  const response = await fetch(`${baseUrl}/auth/signin`, {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
  return response.json();
}

export default { loginUser };

Save me...

Answer 1

Add the export infront of const

import { baseUrl } from '../apiKeys.json'; //not quite remember whether u can do this.

//add the export here.

export const loginUser = async (data) => {
  const response = await fetch(`${baseUrl}/auth/signin`, {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(data)
  });
  return response.json();
}

Answer 2

Unhandled promise rejection means that your code doesn't handle if there's an error occurring. In your function , use trycatch statement. Any error occurring will be handled by catch