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