When I deploy my mern stack app to heroku. Deploying is successful but I'm getting blank page and the following error in the console.
TypeError: Cannot read properties of null (reading 'map')
Here is my corresponding js file which has error. This error doesn't happen in the localhost, after deploying heroku I have.
this is my context.js
const cartFromLocal = JSON.parse(localStorage.getItem("cartItems" || "[]"));
const [testArray, setTestArray] = useState(cartFromLocal);
const [cartCount, setCartCount] = useState(0);
const [cartTotal, setCartTotal] = useState(0);
const [cartItems, setCartItems] = useState();
const addtoCart = (product) =>{
const ProductExist = testArray.find((item) => item.id === product.id);
if (ProductExist) {
setTestArray(
testArray.map((item) => {
if (item.id === product.id) {
return { ...ProductExist, quantity: ProductExist.quantity 1 };
} else {
return item;
}
})
);
} else {
product.quantity = 1;
setTestArray([...testArray, product]);
}
}
useEffect(() => {
let resultCount = 0;
let resultTotal = 0;
testArray.map((item) => {
resultCount = item.quantity;
resultTotal = item.quantity * item.price;
});
setCartCount(resultCount);
setCartTotal(resultTotal);
}, [testArray]);
localStorage.setItem('cartItems', JSON.stringify(testArray));
localStorage.setItem('cartTotal', JSON.stringify(cartTotal));
localStorage.setItem('cartCount', JSON.stringify(cartCount));
function reduceProduct(product){
const ProductExist = testArray.find((item) => item.id === product.id);
if(ProductExist.quantity === 1){
setTestArray(testArray.filter((item)=> item.id !== product.id));
}else{
setTestArray(
testArray.map((item) => item.id === product.id ? {...ProductExist, quantity: ProductExist.quantity-1} : item)
)
}
}
this error doesn't make sense. The map functions should work even if the array is null. I think something is related to heroku because it works in localhost.
this is my heroku logs --tail
2021-12-06T15:53:18.250747 00:00 heroku[web.1]: Starting process with command `npm start`
2021-12-06T15:53:19.411538 00:00 app[web.1]:
2021-12-06T15:53:19.411567 00:00 app[web.1]: > flower-shop-v4@1.0.0 start /app
2021-12-06T15:53:19.411570 00:00 app[web.1]: > node server.js
2021-12-06T15:53:19.411570 00:00 app[web.1]:
2021-12-06T15:53:19.745228 00:00 app[web.1]: Server is starting at 30706
2021-12-06T15:53:19.859271 00:00 app[web.1]: Mongoose is connected!
2021-12-06T15:53:20.061504 00:00 heroku[web.1]: State changed from starting to up
2021-12-06T15:53:21.802770 00:00 heroku[router]: at=info method=GET path="/" host=secret-hollows-83101.herokuapp.com request_id=0aeb9126-f463-4cdd-9406-55486da63eb1 fwd="130.75.173.103" dyno=web.1 connect=0ms service=22ms status=200 bytes=2645 protocol=https
2021-12-06T15:53:22.049726 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css" host=secret-hollows-83101.herokuapp.com request_id=4fbaa092-f10e-4fea-b54a-344f515a31e2 fwd="130.75.173.103" dyno=web.1 connect=0ms service=6ms status=200 bytes=24762 protocol=https
2021-12-06T15:53:22.054789 00:00 heroku[router]: at=info method=GET path="/static/js/2.a010bfcf.chunk.js" host=secret-hollows-83101.herokuapp.com request_id=d8525bb8-434f-47c1-b95c-7c5298f2d593 fwd="130.75.173.103" dyno=web.1 connect=0ms service=13ms status=200 bytes=510662 protocol=https
2021-12-06T15:53:22.289397 00:00 heroku[router]: at=info method=GET path="/static/js/main.a2b4c5ec.chunk.js" host=secret-hollows-83101.herokuapp.com request_id=136379bb-86d4-4075-bc3a-90ccbbda0d81 fwd="130.75.173.103" dyno=web.1 connect=0ms service=7ms status=200 bytes=32389 protocol=https
2021-12-06T15:53:23.637270 00:00 heroku[router]: at=info method=GET path="/manifest.json" host=secret-hollows-83101.herokuapp.com request_id=94e8aa11-2c4f-4c40-abc1-bdf9b239274e fwd="130.75.173.103" dyno=web.1 connect=0ms service=2ms status=200 bytes=819 protocol=https
2021-12-06T15:53:23.758258 00:00 heroku[router]: at=info method=GET path="/logo192.png" host=secret-hollows-83101.herokuapp.com request_id=7a1aa4d8-1e20-4457-ab5d-5f18f9d164dd fwd="130.75.173.103" dyno=web.1 connect=0ms service=2ms status=200 bytes=5654 protocol=https
2021-12-06T15:53:27.043080 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css" host=secret-hollows-83101.herokuapp.com request_id=47846a3e-ebac-4563-b909-a352c290e6e9 fwd="130.75.173.103" dyno=web.1 connect=0ms service=1ms status=304 bytes=270 protocol=https
2021-12-06T15:53:27.043511 00:00 heroku[router]: at=info method=GET path="/manifest.json" host=secret-hollows-83101.herokuapp.com request_id=55a7fd51-4640-46cd-9f84-a3c6fef2845a fwd="130.75.173.103" dyno=web.1 connect=0ms service=1ms status=304 bytes=269 protocol=https
2021-12-06T15:53:27.281397 00:00 heroku[router]: at=info method=GET path="/static/js/main.a2b4c5ec.chunk.js.map" host=secret-hollows-83101.herokuapp.com request_id=7a485091-804a-4d0f-a4a3-b9db65d86eff fwd="130.75.173.103" dyno=web.1 connect=0ms service=2ms status=200 bytes=73344 protocol=https
2021-12-06T15:53:27.297760 00:00 heroku[router]: at=info method=GET path="/static/js/2.a010bfcf.chunk.js.map" host=secret-hollows-83101.herokuapp.com request_id=ff1ba37d-ae7d-49fe-9f63-926ad22d1c02 fwd="130.75.173.103" dyno=web.1 connect=0ms service=17ms status=200 bytes=1679857 protocol=https
2021-12-06T15:53:27.298593 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css.map" host=secret-hollows-83101.herokuapp.com request_id=a58d41fe-8b9e-4132-b3ce-f74410638016 fwd="130.75.173.103" dyno=web.1 connect=0ms service=6ms status=200 bytes=70364 protocol=https
2021-12-06T16:03:43.000000 00:00 app[api]: Build started by user i.cagrigenc@gmail.com
2021-12-06T16:05:09.894803 00:00 app[api]: Release v7 created by user i.cagrigenc@gmail.com
2021-12-06T16:05:09.894803 00:00 app[api]: Deploy c7c9d2a9 by user i.cagrigenc@gmail.com
2021-12-06T16:05:10.000000 00:00 app[api]: Build succeeded
2021-12-06T16:05:10.204023 00:00 heroku[web.1]: Restarting
2021-12-06T16:05:10.336403 00:00 heroku[web.1]: State changed from up to starting
2021-12-06T16:05:11.583800 00:00 heroku[web.1]: Stopping all processes with SIGTERM
2021-12-06T16:05:11.857057 00:00 heroku[web.1]: Process exited with status 143
2021-12-06T16:05:28.063281 00:00 heroku[web.1]: Starting process with command `npm start`
2021-12-06T16:05:29.853093 00:00 app[web.1]:
2021-12-06T16:05:29.853108 00:00 app[web.1]: > flower-shop-v4@1.0.0 start /app
2021-12-06T16:05:29.853109 00:00 app[web.1]: > node server.js
2021-12-06T16:05:29.853109 00:00 app[web.1]:
2021-12-06T16:05:30.863901 00:00 app[web.1]: Server is starting at 9441
2021-12-06T16:05:31.107129 00:00 app[web.1]: Mongoose is connected!
2021-12-06T16:05:31.376988 00:00 heroku[web.1]: State changed from starting to up
2021-12-06T16:05:32.806668 00:00 heroku[router]: at=info method=GET path="/" host=secret-hollows-83101.herokuapp.com request_id=cd6a86a2-8ed4-4e8b-b921-1613faf7bcf6 fwd="130.75.173.103" dyno=web.1 connect=0ms service=20ms status=200 bytes=2645 protocol=https
2021-12-06T16:05:33.190756 00:00 heroku[router]: at=info method=GET path="/static/js/main.e3aa1b98.chunk.js" host=secret-hollows-83101.herokuapp.com request_id=8adf084e-8458-4a45-a16f-8e32f423d9a1 fwd="130.75.173.103" dyno=web.1 connect=0ms service=7ms status=200 bytes=32390 protocol=https
2021-12-06T16:05:33.207063 00:00 heroku[router]: at=info method=GET path="/static/js/2.915cc332.chunk.js" host=secret-hollows-83101.herokuapp.com request_id=8565bbde-735d-4a21-b9dd-f5d1c0f5e7f8 fwd="130.75.173.103" dyno=web.1 connect=0ms service=27ms status=200 bytes=510649 protocol=https
2021-12-06T16:05:33.416390 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css" host=secret-hollows-83101.herokuapp.com request_id=0101b836-e6cb-4d16-bd8a-b0d33cc3f935 fwd="130.75.173.103" dyno=web.1 connect=0ms service=4ms status=200 bytes=24762 protocol=https
2021-12-06T16:05:34.592469 00:00 heroku[router]: at=info method=GET path="/manifest.json" host=secret-hollows-83101.herokuapp.com request_id=70e077cc-8db0-412f-9369-b5f440f79090 fwd="130.75.173.103" dyno=web.1 connect=0ms service=2ms status=200 bytes=819 protocol=https
2021-12-06T16:05:34.744773 00:00 heroku[router]: at=info method=GET path="/logo192.png" host=secret-hollows-83101.herokuapp.com request_id=3bcb41ce-e015-4873-b7ba-da4b8e880215 fwd="130.75.173.103" dyno=web.1 connect=0ms service=31ms status=200 bytes=5654 protocol=https
2021-12-06T16:05:38.906048 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css" host=secret-hollows-83101.herokuapp.com request_id=7d8b57f7-27dc-49df-92ed-2c41ba6dae50 fwd="130.75.173.103" dyno=web.1 connect=0ms service=6ms status=304 bytes=270 protocol=https
2021-12-06T16:05:38.910350 00:00 heroku[router]: at=info method=GET path="/manifest.json" host=secret-hollows-83101.herokuapp.com request_id=a1981d2c-3aa6-44d6-87bd-366a87395b2b fwd="130.75.173.103" dyno=web.1 connect=0ms service=8ms status=304 bytes=269 protocol=https
2021-12-06T16:05:39.127085 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css.map" host=secret-hollows-83101.herokuapp.com request_id=5276f551-b803-477a-8705-619d9a1bed49 fwd="130.75.173.103" dyno=web.1 connect=0ms service=16ms status=200 bytes=70364 protocol=https
2021-12-06T16:05:39.129097 00:00 heroku[router]: at=info method=GET path="/static/js/main.e3aa1b98.chunk.js.map" host=secret-hollows-83101.herokuapp.com request_id=ec6f0eaf-34f1-4bd5-bd41-5064fb5f6673 fwd="130.75.173.103" dyno=web.1 connect=0ms service=16ms status=200 bytes=73407 protocol=https
2021-12-06T16:05:39.169638 00:00 heroku[router]: at=info method=GET path="/static/js/2.915cc332.chunk.js.map" host=secret-hollows-83101.herokuapp.com request_id=4c860ed3-6591-4189-8b17-1528ad126204 fwd="130.75.173.103" dyno=web.1 connect=1ms service=59ms status=200 bytes=1679857 protocol=https
2021-12-06T16:07:41.000000 00:00 app[api]: Build started by user i.cagrigenc@gmail.com
2021-12-06T16:09:08.586821 00:00 app[api]: Release v8 created by user i.cagrigenc@gmail.com
2021-12-06T16:09:08.586821 00:00 app[api]: Deploy 7ef13987 by user i.cagrigenc@gmail.com
2021-12-06T16:09:08.825330 00:00 heroku[web.1]: Restarting
2021-12-06T16:09:08.890874 00:00 heroku[web.1]: State changed from up to starting
2021-12-06T16:09:09.000000 00:00 app[api]: Build succeeded
2021-12-06T16:09:09.941829 00:00 heroku[web.1]: Stopping all processes with SIGTERM
2021-12-06T16:09:10.272491 00:00 heroku[web.1]: Process exited with status 143
2021-12-06T16:09:20.606258 00:00 heroku[web.1]: Starting process with command `npm start`
2021-12-06T16:09:22.906787 00:00 app[web.1]:
2021-12-06T16:09:22.906796 00:00 app[web.1]: > flower-shop-v4@1.0.0 start /app
2021-12-06T16:09:22.906797 00:00 app[web.1]: > node server.js
2021-12-06T16:09:22.906797 00:00 app[web.1]:
2021-12-06T16:09:23.685852 00:00 app[web.1]: Server is starting at 54927
2021-12-06T16:09:23.971225 00:00 heroku[web.1]: State changed from starting to up
2021-12-06T16:09:24.130739 00:00 app[web.1]: Mongoose is connected!
2021-12-06T16:09:25.854999 00:00 heroku[router]: at=info method=GET path="/" host=secret-hollows-83101.herokuapp.com request_id=9d8b5cac-6d1b-4cde-9dab-0ee4a85cc574 fwd="130.75.173.103" dyno=web.1 connect=0ms service=28ms status=200 bytes=2645 protocol=https
2021-12-06T16:09:26.188980 00:00 heroku[router]: at=info method=GET path="/static/js/2.cd0c6874.chunk.js" host=secret-hollows-83101.herokuapp.com request_id=32625e82-2bcc-4d36-8deb-726aff1527e3 fwd="130.75.173.103" dyno=web.1 connect=1ms service=18ms status=200 bytes=510649 protocol=https
2021-12-06T16:09:26.189800 00:00 heroku[router]: at=info method=GET path="/static/js/main.17259788.chunk.js" host=secret-hollows-83101.herokuapp.com request_id=4039b5e8-5cbb-4611-82c8-23d7f4d33f9a fwd="130.75.173.103" dyno=web.1 connect=0ms service=13ms status=200 bytes=32390 protocol=https
2021-12-06T16:09:26.408717 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css" host=secret-hollows-83101.herokuapp.com request_id=406d5545-c1a1-45fb-b83c-fe13422baaaf fwd="130.75.173.103" dyno=web.1 connect=0ms service=5ms status=200 bytes=24762 protocol=https
2021-12-06T16:09:27.759315 00:00 heroku[router]: at=info method=GET path="/manifest.json" host=secret-hollows-83101.herokuapp.com request_id=e021f679-ecd0-44b5-bc09-b740bb36a86b fwd="130.75.173.103" dyno=web.1 connect=0ms service=5ms status=200 bytes=819 protocol=https
2021-12-06T16:09:28.042263 00:00 heroku[router]: at=info method=GET path="/logo192.png" host=secret-hollows-83101.herokuapp.com request_id=86531785-1eb3-4619-9791-5fb886907fe0 fwd="130.75.173.103" dyno=web.1 connect=0ms service=4ms status=200 bytes=5654 protocol=https
2021-12-06T16:09:32.488254 00:00 heroku[router]: at=info method=GET path="/manifest.json" host=secret-hollows-83101.herokuapp.com request_id=1a1fd6bc-78ae-406c-b5e3-b0d38f69c328 fwd="130.75.173.103" dyno=web.1 connect=0ms service=3ms status=304 bytes=269 protocol=https
2021-12-06T16:09:32.488397 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css" host=secret-hollows-83101.herokuapp.com request_id=a300be6e-4d02-4d43-a865-ffd74a578b03 fwd="130.75.173.103" dyno=web.1 connect=0ms service=10ms status=304 bytes=270 protocol=https
2021-12-06T16:09:32.676650 00:00 heroku[router]: at=info method=GET path="/static/js/main.17259788.chunk.js.map" host=secret-hollows-83101.herokuapp.com request_id=264001de-1140-4e94-beab-9b0aab828b44 fwd="130.75.173.103" dyno=web.1 connect=2ms service=17ms status=200 bytes=73470 protocol=https
2021-12-06T16:09:32.728373 00:00 heroku[router]: at=info method=GET path="/static/js/2.cd0c6874.chunk.js.map" host=secret-hollows-83101.herokuapp.com request_id=d0cf54b1-30ca-432b-a075-2a7ef8240e36 fwd="130.75.173.103" dyno=web.1 connect=0ms service=32ms status=200 bytes=1679857 protocol=https
2021-12-06T16:09:32.781761 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css.map" host=secret-hollows-83101.herokuapp.com request_id=1411f28a-90a9-468b-a3ae-fd0a0ff7d23c fwd="130.75.173.103" dyno=web.1 connect=0ms service=5ms status=200 bytes=70364 protocol=https
2021-12-06T16:20:23.000000 00:00 app[api]: Build started by user i.cagrigenc@gmail.com
2021-12-06T16:21:52.808781 00:00 app[api]: Release v9 created by user i.cagrigenc@gmail.com
2021-12-06T16:21:52.808781 00:00 app[api]: Deploy 90167b38 by user i.cagrigenc@gmail.com
2021-12-06T16:21:53.000000 00:00 app[api]: Build succeeded
2021-12-06T16:21:53.194077 00:00 heroku[web.1]: Restarting
2021-12-06T16:21:53.235667 00:00 heroku[web.1]: State changed from up to starting
2021-12-06T16:21:54.389287 00:00 heroku[web.1]: Stopping all processes with SIGTERM
2021-12-06T16:21:54.658056 00:00 heroku[web.1]: Process exited with status 143
2021-12-06T16:22:01.509095 00:00 heroku[web.1]: Starting process with command `npm start`
2021-12-06T16:22:02.762581 00:00 app[web.1]:
2021-12-06T16:22:02.762600 00:00 app[web.1]: > flower-shop-v4@1.0.0 start /app
2021-12-06T16:22:02.762600 00:00 app[web.1]: > node server.js
2021-12-06T16:22:02.762601 00:00 app[web.1]:
2021-12-06T16:22:03.160893 00:00 app[web.1]: Server is starting at 56888
2021-12-06T16:22:03.307149 00:00 app[web.1]: Mongoose is connected!
2021-12-06T16:22:03.319407 00:00 heroku[web.1]: State changed from starting to up
2021-12-06T16:23:03.965446 00:00 heroku[router]: at=info method=GET path="/" host=secret-hollows-83101.herokuapp.com request_id=c9767f6f-a4b2-4855-a036-d18b6cc2cd1b fwd="130.75.173.103" dyno=web.1 connect=0ms service=14ms status=200 bytes=2645 protocol=https
2021-12-06T16:23:04.242699 00:00 heroku[router]: at=info method=GET path="/static/js/main.b96b77fa.chunk.js" host=secret-hollows-83101.herokuapp.com request_id=79cb6fd1-ef93-426a-8407-1f6e3cd63fbb fwd="130.75.173.103" dyno=web.1 connect=0ms service=3ms status=200 bytes=32390 protocol=https
2021-12-06T16:23:04.251866 00:00 heroku[router]: at=info method=GET path="/static/js/2.2d58c30e.chunk.js" host=secret-hollows-83101.herokuapp.com request_id=4e3c1228-825b-4f1c-9959-1d4c21bca92e fwd="130.75.173.103" dyno=web.1 connect=0ms service=5ms status=200 bytes=510649 protocol=https
2021-12-06T16:23:04.472523 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css" host=secret-hollows-83101.herokuapp.com request_id=38c8750f-646e-40af-aca7-46e176256cee fwd="130.75.173.103" dyno=web.1 connect=0ms service=6ms status=200 bytes=24762 protocol=https
2021-12-06T16:23:05.425194 00:00 heroku[router]: at=info method=GET path="/manifest.json" host=secret-hollows-83101.herokuapp.com request_id=bb96c5d1-154f-47b1-83b1-685757181c18 fwd="130.75.173.103" dyno=web.1 connect=0ms service=3ms status=200 bytes=819 protocol=https
2021-12-06T16:23:05.555975 00:00 heroku[router]: at=info method=GET path="/logo192.png" host=secret-hollows-83101.herokuapp.com request_id=9ebf917d-b4c2-4d7c-af01-3d989fed1c77 fwd="130.75.173.103" dyno=web.1 connect=0ms service=8ms status=200 bytes=5654 protocol=https
2021-12-06T16:23:09.266849 00:00 heroku[router]: at=info method=GET path="/manifest.json" host=secret-hollows-83101.herokuapp.com request_id=caf86d2e-edaa-4c25-9519-2c9fbed3560d fwd="130.75.173.103" dyno=web.1 connect=0ms service=1ms status=304 bytes=269 protocol=https
2021-12-06T16:23:09.273012 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css" host=secret-hollows-83101.herokuapp.com request_id=aa61a279-1568-4bb7-b010-65495be2836f fwd="130.75.173.103" dyno=web.1 connect=0ms service=1ms status=304 bytes=270 protocol=https
2021-12-06T16:23:09.536458 00:00 heroku[router]: at=info method=GET path="/static/js/2.2d58c30e.chunk.js.map" host=secret-hollows-83101.herokuapp.com request_id=468a24e6-ddb3-4bc6-837e-2abce96bc121 fwd="130.75.173.103" dyno=web.1 connect=0ms service=11ms status=200 bytes=1679857 protocol=https
2021-12-06T16:23:09.536747 00:00 heroku[router]: at=info method=GET path="/static/js/main.b96b77fa.chunk.js.map" host=secret-hollows-83101.herokuapp.com request_id=53d091a3-06a4-4d91-aa7c-c06af1e523f5 fwd="130.75.173.103" dyno=web.1 connect=1ms service=6ms status=200 bytes=73472 protocol=https
2021-12-06T16:23:09.570000 00:00 heroku[router]: at=info method=GET path="/static/css/main.950fff6a.chunk.css.map" host=secret-hollows-83101.herokuapp.com request_id=bd3d9ad3-e46f-4762-9fad-3480c9b7d071 fwd="130.75.173.103" dyno=web.1 connect=0ms service=2ms status=200 bytes=70364 protocol=https
CodePudding user response：
You are trying to get "cartItems" || "[]" and it will give you always cartItems. So, if there is nothing in the localStorage, this expression will be null:
const cartFromLocal = JSON.parse(localStorage.getItem("cartItems" || "[]"));
It could be fixed, for example, like this:
const cartFromLocal = JSON.parse(localStorage.getItem("cartItems")) || [];