0

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!

3 Answers 3

1

Some optimization process Netlify has might drop editUserInfo = as it would be assigned to a global since it's missing var/let/const.

Try changing it to const editUserInfo = ... instead to see if that helps.

Sign up to request clarification or add additional context in comments.

3 Comments

Also, you have to change all the other function you define after editUserInfo without var/let/const
🤦‍♂️ Can't believe I missed that. Thank you!
@MylesJefferson Glad I could help. You may want to make sure you're using ESlint and a smart enough IDE/editor to catch these! Maybe TypeScript too, if you're feeling brave.
0

try adding a const/let/var in all your function declarations

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
0

For anyone that is having the ReferenceError: location is not defined problem when building in Netlify and that ends up in this SO question:

Double check that the build command runs properly in your local machine: npm run build or similar. I had a problem that was not visible when runnning npm run dev but when I tried npm run build I got the same error I was getting in Netlify.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.