reactjs - Getting a blank page on deploying the app on github

Question

I have created an expense tracker app and it works error free in development. Problem is that I could not deployed it in github. I followed following steps to deploy and it works fine when i deployed other apps. added gh-pages using yarn add gh-pages

"homepage": "https://githubusername.github.io/expense-tracker"
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
git add status
git add .
git commit 
and push origin master

Now i can see only a blank page when i open the url where app is deployed and when i inspect there few errors like;

TypeError: Cannot read property 'map' of undefined

TypeError: Cannot read property 'length' of undefined

https://github.com/sohailshams/expense-tracker

deployed url: https://sohailshams.github.io/expense-tracker/

In development there is no error can anyone please help me to deploy this app and help me to fix the issues.

Answer 1

Navigating through the code I found that you are not returning the right value on this function. I tried loading what is your initialState on the local storage under the key "state" and it worked perfectly.

So the correct solution would be

  const [state, dispatch] = useReducer(AppReducer, initialState, (emptyState) => {
    const localData = localStorage.getItem('state');
    return localData ? JSON.parse(localData) : emptyState;
  });

I think that the main issue is related to the fact that you are expecting an object with the transaction's key but instead you are passing an empty array.

Please, let me know if it doesn't work. I'll be glad to help.