TypeError: "t.map is not a function" value ShoppingList.js:30

[RickJP]

I don't get this error when testing locally. Everything functions perfectly. It is only after I've deployed to Heroku. I've checked the Heroku logs and there's no problem there.

I can see the app run for a fraction of a second and then get a blank screen; whether I use Chrome, Firefox, or Safari.

I hope someone can help.

[shashankshetty1996]

Can you drop in your repository link here? So that we can look into your code once. Also, check if you have connected to the item store. It is because your extracting items from item reducer.

[RickJP]

Sure. Here it is git@github.com:RickJP/TRAVERSY_MERN_Shopping_List.git

[PJijin]

The data from axios take some sec to load. Before actual data has arrived the map tries to works and the error is generated.

Try something like this on ShoppingList.js render

if (this.props.item === undefined) { return <div>Loading....</div>; } else { return <Container>........

[ezapanta]

If you're still having trouble with this, make sure you're using the route by placing app.use('/api/items', items) before serving the static assets

[kentetics]

same problem, did tried what @ezapanta suggested still have the same problem

edit: found the cause, I don't know why but it doesn't support the proxy json syntax at package.json. What I did is instead of axios.get('/api/items') on itemactions.js , i replaced it to axios.get('http://localhost:5000/api/items'). Hope it helps

[aniquehussain]

Thanks, @ezapanta, you are the man.

[Shelroy]

Thank you guys @kentetics. I was having the same problem and it solved it.

[evandev01]

Moving app.use(routes) above static assets in server.js worked for me.

Thanks a ton @ezapanta.

[khiet-alt]

Thanks @kentetics , it's worked, it worked for me