I am following the Building your First Blockchain tutorial(;t=494s).

I have the following in my index.html:

<script src=".js/dist/web3.min.js"></script>
    <script src="vendor/truffle-contract/dist/truffle-contract.js"></script>
    <script src="app.js"></script> 

And when I open my index.html page I get the following error on console:

   (intermediate value).toBigNumber is not a function
    at truffle-contract.js:16802
    at Object.<anonymous> (truffle-contract.js:17735)

It happens in truffle-contract.js node_modules package code:

var BigNumber = (new Web3()).toBigNumber(0).constructor;

It seems like that web3.min.js file does not support "toBigNumber" function. I do have the following dependency in package-lock.json:

 "dependencies": {
        "web3": {
          "version": "0.20.6",
          "resolved": ".20.6.tgz",
          "integrity": "sha1-PpcwauAk+yThCj11yIQwJWIhUSA=",
          "dev": true,
          "requires": {
            "bignumber.js": "git+.js-nolookahead.git",
            "crypto-js": "^3.1.4",
            "utf8": "^2.1.1",
            "xhr2": "*",
            "xmlhttprequest": "*"
          }
        }
      }

Not sure where I can get the right web3.min.js file that supports the toBigNumber function

I am following the Building your First Blockchain tutorial(https://www.youtube./watch?v=coQ5dg8wM2o&t=494s).

I have the following in my index.html:

<script src="https://cdn.jsdelivr/gh/ethereum/web3.js/dist/web3.min.js"></script>
    <script src="vendor/truffle-contract/dist/truffle-contract.js"></script>
    <script src="app.js"></script> 

And when I open my index.html page I get the following error on console:

   (intermediate value).toBigNumber is not a function
    at truffle-contract.js:16802
    at Object.<anonymous> (truffle-contract.js:17735)

It happens in truffle-contract.js node_modules package code:

var BigNumber = (new Web3()).toBigNumber(0).constructor;

It seems like that web3.min.js file does not support "toBigNumber" function. I do have the following dependency in package-lock.json:

 "dependencies": {
        "web3": {
          "version": "0.20.6",
          "resolved": "https://registry.npmjs/web3/-/web3-0.20.6.tgz",
          "integrity": "sha1-PpcwauAk+yThCj11yIQwJWIhUSA=",
          "dev": true,
          "requires": {
            "bignumber.js": "git+https://github./frozeman/bignumber.js-nolookahead.git",
            "crypto-js": "^3.1.4",
            "utf8": "^2.1.1",
            "xhr2": "*",
            "xmlhttprequest": "*"
          }
        }
      }

Not sure where I can get the right web3.min.js file that supports the toBigNumber function

• javascript
• ethereum
• web3js
• truffle

• 2 Web 0.20 is years old. I suggest using newer tutorial as your base learning material. – Mikko Ohtamaa Commented Apr 22, 2021 at 10:37
• Things move so fast almost every tutorial has a shelf life of a few months – Paula Livingstone Commented Oct 15, 2022 at 10:24

5 Answers 5

I included this version of web3 instead of v=1.0.0

https://cdn.jsdelivr/gh/ethereum/[email protected]/dist/web3.min.js

This fixed the issue

The root cause is because the tutorial use old version of library,

I am trying the same tutorial, got the same issue and fix by

1. update package version

     "devDependencies": {
    "bootstrap": "4.1.3",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
    "chai-bignumber": "^2.0.2",
    "lite-server": "^2.3.0",
    "nodemon": "^1.17.3",
    "truffle": "^5.4.9",
    "@truffle/contract": "4.3.33",
    "web3": "1.5.2"
  }

2. update index.html

    <!-- Include all piled plugins (below), or include individual files as needed -->
    <script src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="vendor/web3/dist/web3.min.js"></script>
    <script src="vendor/@truffle/contract/dist/truffle-contract.min.js"></script>
    <script src="app.js"></script>

3. update the loadWeb3 function, using the function from this link

    window.addEventListener('load', async () => {
    // Modern dapp browsers...
    if (window.ethereum) {
        window.web3 = new Web3(ethereum);
        try {
            // Request account access if needed
            await ethereum.enable();
            // Acccounts now exposed
            web3.eth.sendTransaction({/* ... */});
        } catch (error) {
            // User denied account access...
        }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
        window.web3 = new Web3(web3.currentProvider);
        // Acccounts always exposed
        web3.eth.sendTransaction({/* ... */});
    }
    // Non-dapp browsers...
    else {
        console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
    }
   

   });

4. update loadContract function

App.contracts.TodoList.setProvider(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));

5. Try to restart your browser and see

I did the same tutorial, this is how I fixed all the errors I got

app.js

App = {
    contracts: {},
    loading: false,

    load: async () => {
        await App.loadWeb3();
        await App.loadAccounts();
        await App.loadContract();
        await App.render();
    },
   
      // https://medium./metamask/https-medium--metamask-breaking-change-injecting-web3-7722797916a8
    loadWeb3: async () => {
         window.addEventListener('load', async () => {
        // Modern dapp browsers...
        if (window.ethereum) {
            window.web3 = new Web3(ethereum);
            console.log("Loaded....")
            try {
                // Request account access if needed
                await ethereum.enable();
                // Acccounts now exposed
                web3.eth.sendTransaction({/* ... */});
            } catch (error) {
                // User denied account access...
            }
        }
        // Legacy dapp browsers...
        else if (window.web3) {
            window.web3 = new Web3(web3.currentProvider);
            // Acccounts always exposed
            web3.eth.sendTransaction({/* ... */});
        }
        // Non-dapp browsers...
        else {
            console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
        }
        });
    },

    loadAccounts: async () => {
        // connect to all the accounts, we want index 0 since, its the first account
        // the account we are connected to
        App.account = await ethereum.request({ method: 'eth_accounts' });
        console.log(App.account);
    },

    loadContract: async () => {
        // create a JS version of the contracts
        const todoList = await $.getJSON('TodoList.json')
        App.contracts.TodoList = TruffleContract(todoList)
        App.contracts.TodoList.setProvider(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
        // console.log(todoList);

        // Hydrate the smart contract with values from the blockchain
        App.todoList = await App.contracts.TodoList.deployed()
    },

    render: async () => {
        if (App.loading) {
            return;
        }

        // Update app loading state
        App.setLoading(true)

        // Render Account
        $('#account').html(App.account)

        // Render Tasks
        await App.renderTasks()

        // Update loading state
        App.setLoading(false)
        },


    renderTasks: async () => {
        // load all the tasks from the blockchain
        const taskCount = await App.todoList.taskCount();
        const $tackTemplate = $(".taskTemplate");

        // render each of the tasks
        for (var i = 1; i <= taskCount; i++){
            const task = await App.todoList.tasks(i);
            const task_id = task[0].toNumber();
            const task_content = task[1];
            const task_pleted = task[2];

            // Create the html for the task
            const $newTaskTemplate = $tackTemplate.clone()
            $newTaskTemplate.find('.content').html(task_content)
            $newTaskTemplate.find('input')
                            .prop('name', task_id)
                            .prop('checked', task_pleted)
                            .on('click', App.toggleCompleted)
    
            // Put the task in the correct list
            if (task_pleted) {
                $('#pletedTaskList').append($newTaskTemplate)
            } else {
                $('#taskList').append($newTaskTemplate)
            }
    
            // Show the task
            $newTaskTemplate.show()
        }

    },


    setLoading: (boolean) => {
        App.loading = boolean;
        const loader = $('#loader');
        const content = $('#content');
        if (boolean) {
            loader.show();
            content.hide();
        } else {
            loader.hide();
            content.show();
        }
    },


    createTask: async () => {
        App.setLoading(true);
        const content = $('#newTask').val();
        await App.todoList.createTask(content, { from: App.account[0] });
        window.location.reload();
    },


    toggleCompleted: async (e) => {
        App.setLoading(true)
        const taskId = e.target.name
        await App.todoList.toggleCompleted(taskId, { from: App.account[0] });
        window.location.reload()
    },


      
}

$(() => {
    $(window).load(() => {
        App.load();
    })
})

As Mikko pointed out please use an up to date lib (v1.2)

also as BigNumber you can use 'BN' in web3.utils. web3.utils.toBN(number)

Updating the web3.js cdn link fixed the issue for me. Most often this issues are due to package inconsistencies.