Lesson 10 - console.log messages not showing; connected/injected key value not in local storage

[nstapleton1]

Here is my code from ManualHeader.jsx

import {useMoralis} from "react-moralis"
import { useEffect } from "react"

export default function ManualHeader() {
    const { enableWeb3, account, isWeb3Enabled } = useMoralis()

    useEffect(() => {
        if (isWeb3Enabled) return
        enableWeb3()
        console.log("Hi!")
        console.log(isWeb3Enabled)
    }, [isWeb3Enabled]) //[] holds dependency array
    //automaticallly run on load
    //then runs checking the value

    return(<div>
        {account ? (<div>Connected to {account.slice(0, 6)}...
                            {account.slice(account.length - 4)}
                    </div>) 
                : (<button 
                        onClick={async () => {
                            await enableWeb3()
                            if(typeof window !== "undefined"){
                                window.localStorage.setItem("connected", "injected")
                            }
                        }}>Connect</button>)}
        
    </div>)
}

When I open developer tools, none of the console.log messages are appearing. Similarly, the connected/injected key/value pair is not showing under Application>Storage>Local Storage>http://localhost

I am also seeing errors in my console from where I am running the localhost:

./node_modules/moralis-v1/lib/browser/Web3Connector/Web3AuthConnector.js
Module not found: Can't resolve '@web3auth/web3auth' in '/Users/niallstapleton/eth/pc-sol-js-fcc/hh-fcc/nextjs-smartcontract-lotttery-fcc/node_modules/moralis-v1/lib/browser/Web3Connector'

./node_modules/moralis-v1/lib/browser/Web3Connector/WalletConnectWeb3Connector.js
Module not found: Can't resolve '@walletconnect/web3-provider' in '/Users/niallstapleton/eth/pc-sol-js-fcc/hh-fcc/nextjs-smartcontract-lotttery-fcc/node_modules/moralis-v1/lib/browser/Web3Connector'

I am wondering if there is a problem with my path alias setup?

Thanks in advance

[nstapleton1]

I installed the missing packages detailed above and it is working now.

Command used:

yarn add magic-sdk @walletconnect/web3-provider @web3auth/web3auth