This is just a copy-paste from a question I asked on Udemy (I'm just trying to hear from you guys as well).
Hi, I'm trying to get my React App to load, but all it keeps saying is
"Failed to load Web3, accounts, and contract. Check console for details."When I go to the developer console I see that I have 3 warnings and 1 error:
You are accessing the MetaMask window.web3.currentProvider shim. This property is deprecated; use window.ethereum instead. For details, see: https://docs.metamask.io/guide/provider-migration.html#replacing-window-web3
MetaMask: The event 'data' is deprecated and will be removed in the future. Use 'message' instead.For more information, see: https://eips.ethereum.org/EIPS/eip-1193#message
MetaMask: 'ethereum.enable()' is deprecated and may be removed in the future. Please use the 'eth_requestAccounts' RPC method instead. For more information, see: https://eips.ethereum.org/EIPS/eip-1102
And here is the main error:
index.js:1375 TypeError: Cannot read property '1' of undefined
at App.componentDidMount (App.js:22)
This is what's underneath the arrow:
1. console.<computed> @ index.js:1375 > 2. App.componentDidMount @ App.js:40 > 3. async function (async) > 4. App.componentDidMount @ App.js:14 > 5. commitLifeCycles @ react-dom.development.js:22043 > 6. commitLayoutEffects @ react-dom.development.js:25286 > 7. callCallback @ react-dom.development.js:337 > 8. invokeGuardedCallbackDev @ react-dom.development.js:386 > 9. invokeGuardedCallback @ react-dom.development.js:439 > 10. commitRootImpl @ react-dom.development.js:25024 > 11. unstable_runWithPriority @ scheduler.development.js:821 > 12. runWithPriority$2 @ react-dom.development.js:12209 > 13. commitRoot @ react-dom.development.js:24873 > 14. finishSyncRender @ react-dom.development.js:24268 > 15. performSyncWorkOnRoot @ react-dom.development.js:24248 > 16. scheduleUpdateOnFiber @ react-dom.development.js:23638 > 17. updateContainer @ react-dom.development.js:27047 > 18. (anonymous) @ react-dom.development.js:27464 > 19. unbatchedUpdates @ react-dom.development.js:24376 > 20. legacyRenderSubtreeIntoContainer @ react-dom.development.js:27463 > 21. render @ react-dom.development.js:27548 > 22. ./src/index.js @ index.js:7 > 23. __webpack_require__ @ bootstrap:785 > 24. fn @ bootstrap:150 > 25. 0 @ serviceWorker.js:135 > 26. __webpack_require__ @ bootstrap:785 > 27. checkDeferredModules @ bootstrap:45 > 28. webpackJsonpCallback @ bootstrap:32 > 29. (anonymous) @ main.chunk.js:1
I will try to fix the warnings but I'm not sure how I can fix the error (in the console, there isn't even any red line underneath the code in App.js; the only red line I found is in an index.js file, at line 1375:
return n.apply(this, arguments); (undefined)(I'm not sure how to fix this line, but this is what the console is referencing)
And here's the weird part: my node terminal says everything compiled successfully. You would think it would tell me about this error before opening up the localhost. Maybe this whole thing is an issue with my Node.js version (but I downgraded from 14.x to 12.x!).
How can I solve this issue? And, also, one more thing: do the localhosts for React apps have a chain ID? Because, I'm trying to connect to Localhost 8545 for this, and MetaMask refuses to connect. And, I tried to make a Localhost 3000 network, but I don't have a chain ID to put down.
This issue is connected to another problem I asked about: "React App Error". (Link to that question) Ethereum Blockchain Developer Bootcamp With Solidity (2021) | Udemy If someone could respond soon, that would be great.
Thanks for reading this.