Web3 modules can not be imported into my HTML page – Blancer.com Tutorials and projects

I’m attempting to integrate a WalletConnect button into my HTML page using the WalletConnect library from https://walletconnect.com. However, I’m encountering an issue with importing the required files into my HTML page. I’ve successfully installed the necessary packages using npm install @walletconnect/web3wallet, but I’m facing challenges in utilizing them within the following code snippet:

<!DOCTYPE html>
<html>
<head>
    <script type="module">
        import { Core } from '@walletconnect/core'
        import { Web3Wallet } from '@walletconnect/web3wallet'

        (async () => {
            await Web3Wallet.init({
                core: new Core({ projectId: 'xxxxxxxxxxxxx' }),
                metadata: {
                    name: 'Demo app',
                    description: 'Demo Client as Wallet/Peer',
                    url: 'www.walletconnect.com',
                    icons: []
                }
            })
        })()
    </script>
</head>
<body></body>
</html>

I’ve imported both the Core and Web3Wallet modules as specified in the documentation. However, despite correctly installing the required packages, I’m encountering issues in using them within the provided code. I’d appreciate any insights into why the imports might not be working as expected or any steps I might be missing.