[FIXED] Why does my react app show up fine on some decvices but on newer ones it only displays a white page

Issue

My app displays fine on older Macs but not on iPhones or new Mac models. What could be the cause of this? I've been trolling web pages for hours and found nothing that makes any sense to me. Please can anyone help!

here is my app.js

import logo from './logo.svg';
import './App.css';
import MetaMaskModal from './components/MetaMaskModal'
import Home from './components/Home'


function App() {
  let provider = window.web3 && window.web3.currentProvider.isMetaMask;
  return (
    <>
      {window.web3 === undefined ? (
        <MetaMaskModal />
      ) : (<Home />)
      }
    </>
  );
}

export default App;

here is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);



// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();

package.json

"homepage": "http://www.mywebsite.com/#home",

Solution

The problem was not for newer machines or devices. It was not showing up on any devices that didn't have metamask already installed.

Answered By - Slimtradeywestcoast

Answer Checked By - Pedro (PHPFixing Volunteer)