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!
Advertisement
Answer
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.