TypeError: _getWeb3__WEBPACK_IMPORTED_MODULE_0__.default.eth is undefined

Question

I'm not familiar with webpack, but after reading this error all I know that I import one module that is undefined by webpack. However, I don't know why export default new web3.eth.Contract(abi, address); this row can cause this problem. Since I already export web3 from my file getWeb3.js and then import it to this error file storehash.js. I can't find any error in my getWeb3.js file since it is created by truffle unbox react and then all I changed in this file is to change the network to rinkby network. Can anybody help me?

storehash.js

import web3 from './getWeb3';

//access our local copy to contract deployed on rinkeby testnet
//use your own contract address
const address = '0xD0e9A858b68cA1981aa524D22B244C3C3A237ad4';//'0x8f388d3a1a4d011eECb3822EE6bDf78902d0F6f1'; 
//use the ABI from your contract
const abi = [
    {
      "constant": false,
      "inputs": [
        {
          "name": "x",
          "type": "string"
        }
      ],
      "name": "sendHash",
      "outputs": [],
      "payable": false,
      "stateMutability": "nonpayable",
      "type": "function"
    },
    {
      "constant": true,
      "inputs": [],
      "name": "getHash",
      "outputs": [
        {
          "name": "x",
          "type": "string"
        }
      ],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    }
]

export default new web3.eth.Contract(abi, address);

getweb3.js

import Web3 from "web3";

const getWeb3 = () =>
  new Promise((resolve, reject) => {
    // Wait for loading completion to avoid race conditions with web3 injection timing.
    window.addEventListener("load", async () => {
      // Modern dapp browsers...
      if (window.ethereum) {
        const web3 = new Web3(window.ethereum);
        try {
          // Request account access if needed
          await window.ethereum.enable();
          // Acccounts now exposed
          resolve(web3);
        } catch (error) {
          reject(error);
        }
      }
      // Legacy dapp browsers...
      else if (window.web3) {
        // Use Mist/MetaMask's provider.
        const web3 = window.web3;
        console.log("Injected web3 detected.");
        resolve(web3);
      }
      // Fallback to localhost; use dev console port by default...
      else {
        const provider = new Web3.providers.HttpProvider(
          'https://rinkeby.infura.io/v3/172a5e1258804b4d919ded68b1ae1490'
        );
        const web3 = new Web3(provider);
        console.log("No web3 instance injected, using Local web3.");
        resolve(web3);
      }
    });
  });

export default getWeb3;

Below is the error that I got in my browser console.

Answer 1

From what I see this statement import web3 from './getWeb3'; it is wrong, you are assigning getWeb3() nop web3js object, and it fails because new web3.eth.Contract is invalid as it does not have property eth.

IMO in storehash.js you should have

import getWeb3 from './getWeb3';
....
export default () => {
  return getWeb3().then(web3 => new web3.eth.Contract(abi, address))

}