'Error when deploying app on Heroku or Railway
This is my first time deploying a MERN app and I keep coming across these errors:
I'm getting this error when attempting to deploy it in Heroku:
remote: Module not found: Error: Can't resolve './Store' in '/tmp/build_1d3d428a/frontend/src'
I wanted to try deploying it using another technology because I heard that Heroku was having issues. This error comes up when I try deploying the same app in Railway:
Failed to compile. Module not found: Error: Can't resolve './Store' in '/workspace/frontend/src'
I'm guessing something is wrong with the Store file but I'm not sure what it is. Here is the code in that file:
import { createContext, useReducer } from "react";
export const Store = createContext();
//define initial state in cart based on local storage
const initialState = {
//check if user exists
userInfo: localStorage.getItem("userInfo")
? JSON.parse(localStorage.getItem("userInfo"))
: null,
cart: {
//get shipping address, payment method and cart items based on user
shippingAddress: localStorage.getItem("shippingAddress")
? JSON.parse(localStorage.getItem("shippingAddress"))
: {},
paymentMethod: localStorage.getItem("paymentMethod")
? localStorage.getItem("paymentMethod")
: "",
cartItems: localStorage.getItem("cartItems")
? JSON.parse(localStorage.getItem("cartItems"))
: [],
},
};
//update state in cart
//instead of creating duplicate items of the same product, we increase the amount of the one product if button is pressed more than once
function reducer(state, action) {
switch (action.type) {
//add items to cart
case "CART_ADD_ITEM":
const newItem = action.payload;
const existItem = state.cart.cartItems.find(
(item) => item._id === newItem._id
);
const cartItems = existItem
? state.cart.cartItems.map((item) =>
item._id === existItem._id ? newItem : item
)
: [...state.cart.cartItems, newItem];
localStorage.setItem("cartItems", JSON.stringify(cartItems));
return { ...state, cart: { ...state.cart, cartItems } };
//second case: remove item from cart
case "CART_REMOVE_ITEM": {
const cartItems = state.cart.cartItems.filter(
(item) => item._id !== action.payload._id
);
localStorage.setItem("cartItems", JSON.stringify(cartItems));
return { ...state, cart: { ...state.cart, cartItems } };
}
//clear cart
case "CART_CLEAR":
return { ...state, cart: { ...state.cart, cartItems: [] } };
//update user info based on data from the backend
case "USER_SIGNIN":
return { ...state, userInfo: action.payload };
//case where user is signed out
case "USER_SIGNOUT":
return {
...state,
userInfo: null,
cart: {
cartItems: [],
shippingAddress: {},
paymentMethod: "",
},
};
//update shipping address with data from payload
case "SAVE_SHIPPING_ADDRESS":
return {
...state,
cart: { ...state.cart, shippingAddress: action.payload },
};
//save payment method
case "SAVE_PAYMENT_METHOD":
return {
...state,
cart: { ...state.cart, paymentMethod: action.payload },
};
default:
return state;
}
}
export function StoreProvider(props) {
const [state, dispatch] = useReducer(reducer, initialState);
const value = { state, dispatch: dispatch };
return <Store.Provider value={value}>{props.children}</Store.Provider>;
}
Please let me know if I should include anything else. I'm not sure what is making the file/app undeployable.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
