While working on the challenge i was stuck for 3 hours because my "Connect Wallet" button threw Cannot read properties of undefine.
I thought Solana was broken. Turns out, I was broken. Here are 3 concepts that clicked for me:
- async/await is just "wait for your food" JavaScript doesn't wait by default. When you call an API, you get a Promise, not data. //Wrong – I did this for days const res = fetch(url) console.log(res) // Promise {}
// Right
const res = await fetch(url) // pause until network responds
const data = await res.json() // pause until body is parsed
console.log(data)
Rule: Use await twice for fetch. Once for network, once for .json(). And your function must be async.
- window.solana.connect() is not JavaScript
This was my biggest facepalm. I assumed
connect(),publicKey,signTransaction()were built into JS likefetch().
Reality check:
new Connection()👇 @solana/web3.js npm package
window.solana.connect()👇 Phantom extension injects it
Phantom adds this script to every page:
window.solana = {
connect: async () => { /opens popup / },
signTransaction: async (tx) => { / signs locally / }
}
If you uninstall Phantom, window.solana disappears. That's why my code crashed in incognito.
Lesson: If it's not on MDN and you didn't npm install it, check if an extension injected it. Open console and type window.solana to verify.
I am opened to comments, corrections and learning more. Let's take up the next challenge 💪.
What concept clicked for you recently? Drop it below 👇
Top comments (1)
What should I debug tonight 🤔