React-Native "undefined is not a function" error when sending a post request from client

Question

Server side code is working properly as I have tested it with thunderclient/postman, and have received the correct response from the external api (fyi, the external api is an api managed by the Department of Veterans Affairs). I have scoured my client side code but cannot locate the issue. The issue is that every time I send the post request from my client, I get the error "undefined is not a function". Here is my client side code (the relevant parts anyway - fyi, personal data included is dummy data provided by the DVA for dev purposes and is not confidential)... "

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';

const axios = require('axios'); 
import PhoneInput from 'react-native-phone-input';


export default function  FormScreen({ navigation }) {


  const [firstName, setFirstName] = useState('Alfredo');
  const [middleName, setMiddleName] = useState('M');
  const [lastName, setLastName] = useState('Armstrong');
  const [gender, setGender] = useState('M');
  const [birthDate, setBirthDate] = useState('1993-06-08');
  const [zipCode, setZipCode] = useState('78664');
  const [birthPlaceCity, setBirthPlaceCity] = useState('Johnson City');
  const [homePhoneNumber, setHomePhoneNumber] = useState('555-555-5555');

  const [streetAddressLine1, setStreetAddressLine1] = useState('17020 Tortoise St')
  const [city, setCity] = useState('Round Rock')
  const [state, setState] = useState('TX')
  const [country, setCountry] = useState('USA')
  const [mothersMaidenName, setMothersMaidenName] = useState('Smith')
  const [birthPlaceState, setBirthPlaceState] = useState('MA')
  const [birthPlaceCountry, setbirthPlaceCountry] = useState('USA')

  const handleSubmit = async () => {
    const formData = {
      firstName,
      lastName,
      birthDate,
      middleName,
      gender,
      streetAddressLine1,
      city,
      zipCode,
      state,
      country,
      homePhoneNumber,
      mothersMaidenName,
      birthPlaceCity,
      birthPlaceState,
      birthPlaceCountry
    };

  const postURL = 'http://10.0.0.130:3500/VetVERIFICATION/VerificationPayload'

   try {
    const response = await axios.post(postURL, formData);
    console.log('API Response:', response.data);
   } catch (error) {
    console.error('API Error:', error);
    console.log(formData)
   }

  };



  return (
    <(some code)> 
    <View>
        <TouchableOpacity onPress={handleSubmit} style={styles.button}>
            <Text style={styles.buttonText}>Submit</Text>
        </TouchableOpacity>
    </View>
    <View style={styles.introContainer}>
        <Text style={styles.introText}>If you are having trouble verifying your 
            Veteran status here, please visit your VA.gov account to change or confirm 
            the data on file. MILVETCOM does not store any of the data you provide in this form.
        </Text>
    </View>
    <(some closing tags)/>
  );
 };

Again, every time I press the 'Submit' button, the handleSubmit function is called. But it ALWAYS returns an error response "undefined is not a function", regardless of the fact that server-side testing returns the correct response.

I have tried

1. checking the format of my formData const and it works (I console.logged that info, copied it, and pasted it in postman/thunderclient and it worked just fine from the backend.
2. checked my postURL to ensure it was correct. It is. And, again, this same url works when tested from the server-side
3. Asked ChatGPT about every question I could think of and in every possible way. By the way, is AI so good that it can actually become annoyed with a person?

Answer 1

Change

const axios = require('axios'); 

to:

import axios from 'axios'