May Not Work Without MetaMask Extension Installed

[lloy0076]

% Truffle\React\client>truffle --version
Truffle v5.8.2 (core: 5.8.2)
Ganache v7.7.7
Solidity v0.5.16 (solc-js)
Node v19.6.0
Web3.js v1.8.2

I am on Windows.

I have Firefox latest or Chrome latest.

I started Ganache. I configured the Truffle correctly. I ran the tests against the Ganache. I observed that things appeared to be working (when tests run, gas was withdrawn, when the contract deployed, gas was withdrawn, when Ganache was aware of the project, it could tell if/when the contract(s) were deployed).

WHEN I did NOT install the Metamak extension, the React app would:

1. Start
2. Flash something up too fast for me to see
3. The Suspense would kick in but give me a totally blank screen

Dev console on Chrome said: "window.ethereum is undefined".

FireFox was silent.

No gas etc. or transactions recording against Ganache/blockchain.

FIX:

• Install the Metamask extension

Then witness the React screen!!!!

^^ it works.

BECAUSE it eventually work, I can surmise that it's not my Blockchain test rig that is broken (i.e. Ganache is working as advertised). Because I could install Metamask, and connect it to my local blockchain and it sees the "correct" apparent values, the RPC server (on localhost:7545) seems to be working correctly as a test network.

BECAUSE webpack is/was able to build the app the problem isn't that webpack failed. It's working. Besides, once I installed Metamask, I an see the various react components (and the react dev tools look as I expect).

So it has something to do with the need for Metamask extension to be present?

To verify further, I opened the React app in Edge (which doesn't have the extension installed yet) and again it gives a blank screen but I include a screenshot of the console:

Questions/Suggestions:

1. Did I do something wrong? All I did was truffle unbox react-box and follow the README instructions?
2. Does it really require Metamask?

If the answer is (2) then perhaps the README could be adjusted or an FAQ be made. I'm surely not the only one to see this.

ALSO would it be worth adding a catch/Suspense/something that caught a major misconfiguration like this and gave a nicer experience to the end user than a blank screen? I realise that anyone downloading this box should know how to debug/diagnose React/JS errors but it was very surprising to me at first...

[lloy0076]

Hah! I forgot one can just download logs as text, here's that log - Chrome's is basically the same:

localhost-1681750409539.log.txt

[lloy0076]

Metamask's site suggest:

https://docs.metamask.io/wallet/get-started/detect-metamask

if (typeof window.ethereum !== 'undefined') {
  console.log('MetaMask is installed!');
}

I adjusted EthProvider.jsx like this:

It now works a little "better" (but the RPC server complains, nonetheless this is another problem).