TypeError: "Cannot read property '1' of undefined at App.componentDidMount"

Smart Contracts
,
1

Hi! If any of you reading this are JavaScript (more specifically, ReactJS) experts, then I would fully appreciate your help.

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:

Warning 1:

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

Warning 2:

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

Warning 3:

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. :smile:

Thanks for reading this.

2

UPDATE

I was able to get an account from truffle to connect to Localhost 8545 (where my react app is), but after reloading the page, now I'm getting a new error:

index.js:1375 TypeError: Cannot read property '5777' of undefined
    at App.componentDidMount

It's still referencing the same lines in App.js (which, as far as I can tell, has no errors, especially since there's no red underline) and index.js (which has a red underline at LN# 1375), but now that I'm connected I'm getting this new error. Not sure what to do about it. Have any of you ever had this problem before? Whether it be my first error or this one? This is kinda weird.

3

OK, I swear my localhost is acting fickle or something. Now, today, I reopened my project to try and fix the errors I've been dealing with, but NOW, all of a sudden, they have magically disappeared. Remember how I said return n.apply(this, arguments); was the main line that the console didn't like? It kept saying it was undefined. Now, everything in App.js and index.js is crystal clear (and you can imagine how much of a "you gotta be frickin' kidding me" moment that was for me, as I spent many an hour trying to figure this out yesterday).

But, don't get me wrong, there's still an error preventing me from loading the page. Today, it says, Error while trying to use the following icon from the Manifest: http://localhost:3000/logo192.png (Download error or resource isn't a valid image). I'm thinking maybe I need to go to GitHub and find logo192.png straight from the React people. But, my Manifest.json file just keeps saying loading... in the console, so I can't edit it or find the source of the problem (at least right now I can't). If someone can help me with my fickle React issues, that would be greatly appreciated.

(BTW, my warnings are still there, so I'll see if I can fix those)

4

Sigh

After fixing (I think) the manifest.json file, now the console is back to the Cannot read property '5777' of undefined error.

Maybe I should just keep refreshing and it'll go away?

5

Maybe I should've named this post TypeError: Console can't decide what error it wants to give me! Now I'm back to my original error after restarting my computer:

TypeError: Cannot read property '1' of undefined
    at App.componentDidMount

I really, really need help.

A minute later

After refreshing the page twice just now, I'm back to the 5777 error. I think I'm going to contact React about this whole thing, because this is driving me nuts.