meta mask not connecting

[somtech123]

i'm getting this errror when trying to connect to my metamask in the HTML TS Buy Me A Coffe tutorial when i inspect my console and i cannoont connect my metamask
Content Security Policy of your site blocks the use of 'eval' in JavaScript`
The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.

To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.

⚠️ Allowing string evaluation comes at the risk of inline script injection.

1 directive
Source locationDirectiveStatusscript-srcblocked

this is my script import { createWalletClient, custom } from "https://esm.sh/viem";

const connectButton = document.getElementById("connectButton");

let walletClient;
async function connect() {
if (typeof window.ethereum !== "undefined") {
walletClient = createWalletClient({
transport: custom(window.ethereum),
});
await walletClient.requestAddresses();
} else {
connectButton.innerHTML = "Please install metamask!";
}
}

connectButton.onclick = connect;

and my index.html

<title>Buy Me a Cofee</title> connect <script src="./index-js.js" type="module"></script>

[EngrPips]

I asked Gemini and it suggested that you should have your HTML head as the below

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval' https://esm.sh; connect-src *;">
    
    <title>Buy Me a Coffee</title>
</head>

Try it and let's see if that resolves the issue.