(intermediate value).toBigNumber is not a function

Question

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

I have the following in my index.html:

<script src="https://cdn.jsdelivr.net/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.org/web3/-/web3-0.20.6.tgz",
          "integrity": "sha1-PpcwauAk+yThCj11yIQwJWIhUSA=",
          "dev": true,
          "requires": {
            "bignumber.js": "git+https://github.com/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

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

score 2 · Answer 1 · answered Aug 08 '21 at 09:12

2

I included this version of web3 instead of v=1.0.0

https://cdn.jsdelivr.net/gh/ethereum/web3.js@0.20.6/dist/web3.min.js

This fixed the issue

answered Aug 08 '21 at 09:12

Tareq

21
3

score 2 · Answer 2 · answered Sep 05 '21 at 15:14

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

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"
  }

update index.html

    <!-- Include all compiled 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>

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!');
 }

});

update loadContract function

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

Try to restart your browser and see

score 1 · Answer 3 · answered Apr 22 '21 at 16:42

1

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)

answered Apr 22 '21 at 16:42

Ossip

1,046
8
20

score 1 · Answer 4 · edited Jan 24 '22 at 09:19

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.com/metamask/https-medium-com-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_completed = 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_completed)
                            .on('click', App.toggleCompleted)
    
            // Put the task in the correct list
            if (task_completed) {
                $('#completedTaskList').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();
    })
})

Added a list of dependencies as a new answer, refer to that post. Thanks — Princejr, Jan 25 '22 at 12:05

score 0 · Answer 5 · answered Jan 03 '23 at 03:39

0

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

answered Jan 03 '23 at 03:39

code-assassin

415
4
14

(intermediate value).toBigNumber is not a function

5 Answers5