Error when a user tries to sign up: TypeError: _api_api__WEBPACK_IMPORTED_MODULE_5__.default… is not a function

  javascript, node.js, reactjs

I’m new to Node/React and I’m creating a learning project. It’s a platform that connects freelancers (users) and nonprofits (companies). You can signup as a user or as a company. They have separate signup/login pages. Right now users can register fine, but when a company tries to register, I get the error TypeError: _api_api__WEBPACK_IMPORTED_MODULE_5__.default.signupCompany is not a function.

The error is referring to this part of the below code in app.js: let token = await VolunteerApi.signupCompany(signupData);

What could be causing this, and how do I fix this? I’ll also add that the backend API is working fine (tested in Insomnia). When I register a company, I get a token back as expected.

Thanks. I’d appreciate any help.

Edit: I added more code about how I’m importing exporting the VolunteerApi file.

app.js

import React, { useState, useEffect } from "react";
import { BrowserRouter } from "react-router-dom";
import Navigation from "./routes-nav/Navigation";
import Routes from "./routes-nav/Routes";
import jwt from "jsonwebtoken";
import VolunteerApi from "./api/api";
import UserContext from "./auth/UserContext";
import useLocalStorage from "./hooks/useLocalStorage";
import LoadingSpinner from "./common/LoadingSpinner";
export const TOKEN_LOCAL_STORAGE_ID = "volunteer-token";

function App() {

  const [currentUser, setCurrentUser] = useState(null);
  const [currentCompany, setCurrentCompany] = useState(null);
  const [token, setToken] = useLocalStorage(TOKEN_LOCAL_STORAGE_ID);

  // Signup user function 
  async function signupUser(signupData) {
    try {
      let token = await VolunteerApi.signupUser(signupData);
      setToken(token);
      return {
        success: true
      };
    } catch (err) {
      console.error("Problem with the signupUser function", err);
      return {
        success: false, err
      };
    }
  }

  // Signup company function 
  async function signupCompany(signupData) {
    try {
      let token = await VolunteerApi.signupCompany(signupData);
      setToken(token);
      return {
        success: true
      };
    } catch (err) {
      console.error("Problem with the signupCompany function", err);
      return {
        success: false, err
      };
    }
  }

  return (
    <BrowserRouter>
      <UserContext.Provider value={{ currentUser, setCurrentUser, currentCompany, setCurrentCompany }}>
        <div>
          <Navigation />
          <Routes signupUser={signupUser} signupCompany={signupCompany} />
        </div>
      </UserContext.Provider>
    </BrowserRouter>
  );
}

export default App;  

CompanySignupForm

function CompanySignupForm({ signupCompany }) {

  const [formData, setFormData] = useState({
    companyHandle: "",
    password: "",
    companyName: "",
  });
  const [formErrors, setFormErrors] = useState([]);
  const history = useHistory();

  // Handle submit 
  async function handleSubmit(evt) {
    evt.preventDefault();
    let results = await signupCompany(formData);
    if (results.success) {
      history.push("/");
    } else {
      setFormErrors(results.errors);
    }
  }

  // Handle change
  function handleChange(evt) {
    const { name, value } = evt.target;
    setFormData(data => ({ ...data, [name]: value }));
  }

  return (
    <div>
      <h1>Company Signup Form</h1>
      <div>
        <form onSubmit={handleSubmit}>
          <div>
            <input
              name="companyHandle"
              placeholder="Company Handle"
              value={formData.companyHandle}
              onChange={handleChange}
            />
          </div>
          <div>
            <input
              name="password"
              placeholder="Password"
              type="password"
              value={formData.password}
              onChange={handleChange}
            />
          </div>
          <div>
            <input
              name="companyName"
              placeholder="Company name"
              value={formData.companyName}
              onChange={handleChange}
            />
          </div>          

          {formErrors.length
            ? <Alert type="danger" message={formErrors} />
            : null
          }

          <button>
            Submit
          </button>
        </form>
      </div>
    </div>
  );
}

api.js

import axios from "axios";

const BASE_URL = process.env.REACT_APP_BASE_URL || "http://localhost:3001";

class VolunteerApi {
  static token;

  static async request(endpoint, data = {}, method = "get") {
    console.debug("API Call:", endpoint, data, method);

    const url = `${BASE_URL}/${endpoint}`;
    const headers = { Authorization: `Bearer ${VolunteerApi.token}` };
    const params = (method === "get")
      ? data
      : {};

    try {
      return (await axios({ url, method, data, params, headers })).data;
    } catch (err) {
      console.error("API Error:", err.response);
      let message = err.response.data.error.message;
      throw Array.isArray(message) ? message : [message];
    }
  }

  // Individual API routes

  /***************************************************company */

  // Signup company
  static async signupCompay(data) {
    let res = await this.request(`auth/register-company`, data, "post");
    return res.token;
  }

  /************************************************user */

  // Signup user
  static async signupUser(data) {
    let res = await this.request(`auth/register-user`, data, "post");
    return res.token;
  }

}

export default VolunteerApi;

Source: Ask Javascript Questions

LEAVE A COMMENT