ReferenceError when deploying project to Netlify

November 23, 2021

I am encountering an issue when deploying my React project to Netlify saying that my editUserInfo function within my profile-info view is not defined. Additionally, I am using React-Router to switch views in my project. This works perfectly in development and all of my links work fine until I try accessing the profile view. Other than this, the site deployed with no issues.

Here is the code for my profile view:

import React, { useEffect, useState } from "react";
import axios from "axios";
import UserInfo from "./user-info";
import { Col } from "react-bootstrap";
import MovieReelSpinner from "../MovieReelSpinner/MovieReelSpinner";
import InfoForm from "../form/info-form";
import FavoriteMovies from "./favorite-movies";
import DeleteModal from "./delete-modal";
import { URL } from "../../helpers/helpers";
import { useSelector, useDispatch } from "react-redux";
import { setUser, removeFromFavs } from "../../redux/features/userSlice";

import "../../styles/_profile-view.scss";

const ProfileView = ({ movies }) => {
  const favoriteMovies = useSelector(
    (state) => state.user.value.FavoriteMovies,
  );
  const userValues = useSelector((state) => state.user.value);
  const [show, setShow] = useState("");

  const token = localStorage.getItem("token");
  const user = localStorage.getItem("user");
  const dispatch = useDispatch();

  useEffect(() => {
    axios
      .get(`${URL}/users/${user}`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((res) => {
        const {
          Username,
          Password,
          Email,
          Birthday,
          FavoriteMovies,
        } = res.data;
        dispatch(
          setUser({
            Username,
            Password,
            Email,
            Birthday: Birthday.slice(0, 10),
            FavoriteMovies: movies.filter((movie) =>
              FavoriteMovies.includes(movie._id),
            ),
          }),
        );
      })
      .catch((err) => console.log(err));
  }, []);

  editUserInfo = ({ username, password, email, birthday }) => {
    axios
      .put(
        `${URL}/users/update/${user}`,
        {
          Username: username,
          Password: password,
          Email: email,
          Birthday: birthday,
        },
        {
          headers: { Authorization: `Bearer ${token}` },
        },
      )
      .then((res) => {
        localStorage.setItem("user", username);
        dispatch(
          setUser({
            Username: username,
            Password: password,
            Email: email,
            Birthday: birthday,
          }),
        );
        alert(`${username} has been updated!`);
      })
      .catch((err) => console.log(err));
  };

  removeFromFavorites = (id) => {
    axios
      .delete(`${URL}/users/${user}/movies/${id}`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((res) => dispatch(removeFromFavs(favoriteMovies.indexOf(id))))
      .catch((err) => console.log(err));
  };

  deleteUser = () => {
    axios
      .delete(`${URL}/users/${user}`, {
        headers: { Authorization: `Bearer ${token}` },
      })
      .then((res) => {
        alert(`${user} has been deleted`);
        localStorage.removeItem("user");
        localStorage.removeItem("token");
        window.open("/", "_self");
      });
    setShow("");
  };

  if (show === "update")
    return <InfoForm editUserInfo={editUserInfo} setShow={setShow} />;

  return (
    <Col>
      <UserInfo
        user={userValues.Username}
        email={userValues.Email}
        birthday={userValues.Birthday}
        setShow={setShow}
      />
      <DeleteModal show={show} setShow={setShow} deleteUser={deleteUser} />
      {favoriteMovies ? (
        <FavoriteMovies
          favoriteMovies={favoriteMovies}
          removeFromFavorites={removeFromFavorites}
        />
      ) : (
        <MovieReelSpinner />
      )}
    </Col>
  );
};

export default ProfileView;

Reference Error:

ReferenceError: editUserInfo is not defined
    at Ay (profile-view.jsx:39)
    at bi (react-dom.production.min.js:157)
    at is (react-dom.production.min.js:267)
    at Bs (react-dom.production.min.js:250)
    at $s (react-dom.production.min.js:250)
    at Us (react-dom.production.min.js:250)
    at Fs (react-dom.production.min.js:243)
    at react-dom.production.min.js:123
    at b (scheduler.production.min.js:18)
    at aa (react-dom.production.min.js:122)

Any help would be much appreciated!