Uncaught ReferenceError: bundle is not defined when calling bundled JavaScript function

Question

I'm encountering a ReferenceError when trying to call a function from my bundled JavaScript file in an HTML button's onclick attribute. The error message I'm seeing is: Uncaught ReferenceError: bundle is not defined

Here's the relevant part of my HTML code:

<button id="connectButton" onclick="bundle.connect()">Connect</button>
<button id="executeButton" onclick="bundle.execute()">Execute</button>

And here's how I'm bundling my JavaScript using Webpack:

// webpack.config.js

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};
const { ethers } = require("ethers");

async function connect() {
    if (typeof window.ethereum !== 'undefined') {
        await window.ethereum.request({ method: 'eth_requestAccounts' });
    }
}

async function execute() {

    const contractAdrress = "0x5fbdb2315678afecb367f032d93f642f64180aa3";
    const abi = [
        {
          "inputs": [
            {
              "internalType": "string",
              "name": "_name",
              "type": "string"
            },
            {
              "internalType": "uint256",
              "name": "_favoriteNumber",
              "type": "uint256"
            }
          ],
          "name": "addPerson",
          "outputs": [],
          "stateMutability": "nonpayable",
          "type": "function"
        },
        {
          "inputs": [
            {
              "internalType": "string",
              "name": "",
              "type": "string"
            }
          ],
          "name": "nameToFavoriteNumber",
          "outputs": [
            {
              "internalType": "uint256",
              "name": "",
              "type": "uint256"
            }
          ],
          "stateMutability": "view",
          "type": "function"
        },
        {
          "inputs": [
            {
              "internalType": "uint256",
              "name": "",
              "type": "uint256"
            }
          ],
          "name": "people",
          "outputs": [
            {
              "internalType": "uint256",
              "name": "favoriteNumber",
              "type": "uint256"
            },
            {
              "internalType": "string",
              "name": "name",
              "type": "string"
            }
          ],
          "stateMutability": "view",
          "type": "function"
        },
        {
          "inputs": [],
          "name": "retrieve",
          "outputs": [
            {
              "internalType": "uint256",
              "name": "",
              "type": "uint256"
            }
          ],
          "stateMutability": "view",
          "type": "function"
        },
        {
          "inputs": [
            {
              "internalType": "uint256",
              "name": "_favoriteNumber",
              "type": "uint256"
            }
          ],
          "name": "store",
          "outputs": [],
          "stateMutability": "nonpayable",
          "type": "function"
        },
      ];
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const contract = new ethers.Contract(contractAdrress, abi, signer);
      await contract.store(42)
}


window.connect = connect;
window.execute=  execute;

The bundle.js file is generated successfully, and I can see the functions connect and execute defined in it. However, when I click on the buttons in the HTML, I get the ReferenceError mentioned above.

I've checked that the bundle.js file is correctly linked in the HTML tag, and I've verified that the functions connect and execute are indeed present in the bundled JavaScript file.

Could someone please help me understand why this error is occurring and how I can resolve it?

Answer 1

The error was that the function it wasn't well called because i exported it in this form:

window.connect = connect;
window.execute=  execute;

So the solution is:

 <button id="connectButton" onclick="window.connect()">Connect</button>
 <button id="executeButton" onclick="window.execute()">Execute</button>

Whole HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>Javascript Test</title>
  </head>

  <body>
    <button id="connectButton" onclick="window.connect()">Connect</button>
    <button id="executeButton" onclick="window.execute()">Execute</button>
  </body>

  <script src="./dist/bundle.js" type="text/javascript"></script>
</html>

Whoever wants to copy paste that code becarfule because in the index.js there's another error at the bottom of the execute funnction:

      const provider = new ethers.providers.Web3Provider(window.ethereum);

why it's that wrong? It's not wrong at all because it still working in the ethers 5.7.2(I don't know if in any 5.x.x version still works). solution to that:

npm uninstall ethers
npm i -S [email protected]

Another solution for the latest version and the most recommended is that line of code :

const provider = new ethers.BrowserProvider(window.ethereum);