Metamask stopped injecting Web3 | (intermediate value).toBigNumber is not a function | The send transactions "from" field must be defined | Web3 is not a constructor

[ahampriyanshu]

If you are facing any of the above error(s) then :

• update all the dev dependencies and install web3

  "devDependencies": {
    "bootstrap": "4.1.3",
    "chai": "^4.1.2",
    "chai-as-promised": "^7.1.1",
    "chai-bignumber": "^2.0.2",
    "lite-server": "^2.6.1",
    "nodemon": "^2.0.15",
    "truffle": "^5.4.29",
    "@truffle/contract": "4.4.4",
    "web3": "1.6.1"
  }

• Update index.html

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

to

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

• Update loadWeb3

    loadWeb3: async () => {

        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 loadAccount

  loadAccount: async () => {
    const account = await ethereum.request({ method: 'eth_requestAccounts' });
    App.account = account[0];
  },

• Update loadContract

  loadContract: async () =>{
    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"));
    App.todoList = await App.contracts.TodoList.deployed();
    },

• Update createTask

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

• Update toggleCompleted

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

[ahampriyanshu]

• Migration guide
• Working code
• Stackoverflow