I have a project that is displaying a blank page on GitHub Pages. I have added
"homepage": "https://jusmccar.github.io/ContactManager",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
to my package.json and ran the commands
npm install gh-pages --save-dev
npm run deploy
Here is the link to my repo: ContactManager
I have another project FitClub that it works just fine on so I don't know what I'm doing wrong.
Your problem is here in App.js
const [contacts, setContacts] = useState( JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) );
You're not doing anything to handle the initial case where there is nothing in local storage.
This causes null to be passed to the contacts prop in ContactList. The code there attempts to use props.contacts.map() which leads to this error you see in your browser console...
Cannot read properties of null (reading 'map')
at x (ContactList.js:9:46)
I would suggest defaulting to an empty array when getItem() returns null
const [contacts, setContacts] = useState(
JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) ?? []
);
A further suggestion would be to use TypeScript which would warn you about the potential for localStorage to return null values.
I think it deployed fine, but there is an error in your ContactsList component. Look it the console. TypeError: e.contacts is null