Question

通过Reactjs Webpack项目，我能够运行webpack开发服务器并在拾取了web3的情况下访问我的index.html。

如果我构建项目并在Chrome中打开index.html，则不会检测到web3。

运行webpack-dev-server --mode development --open --hot时一切正常但是通过webpack --mode开发，则不会注入web3

我的应用程序的目的是要在本地运行该工具，不必从任何公共场所提供该工具，而且我也看不到需要运行lite服务器来提供内容。

web3：1.0.0-beta.36
webpack：4.22.0
webpack-cli：3.1.2

webpack-dev-server：3.1.8

import './index.css';
import IxoTimelockApp from './components/IxoTimelockApp';
import InstallMetaMask from './components/install- 
metamask/install-metamask-component.jsx';
let regeneratorRuntime =  require("regenerator-runtime");
class App extends Component {

state = {
    web3Obj:null
}
componentDidUpdate(prevprops) {
    if (prevprops != this.props){
        this.setState({web3Obj: this.props.web3Obj})
    }
}
componentDidMount(){
    window.addEventListener('load', async () => {
        // Modern dapp browsers...
        if (window.ethereum) {
            window.web3 = new Web3(ethereum);
            try {
                // Request account access if needed
                await ethereum.enable();
                this.setState({web3Obj: window.web3})
            } catch (error) {
                // User denied account access...
            }
        }
        // Legacy dapp browsers...
        else if (window.web3) {
            window.web3 = new Web3(web3.currentProvider);
            this.setState({web3Obj: window.web3})
        }
        // Non-dapp browsers...
        else {
            console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
        }
    });
}


render() {
     if(this.state.web3Obj) {
        return <TimelockApp/>
    }else return <InstallMetaMask/>
}
}



export default App;

const wrapper = document.getElementById("root");
wrapper ? ReactDOM.render(<App />, wrapper) : false;

Answer 1

发件人：MetaMask Compatibility Guide

要求

Http（s）-需要Web服务器

由于浏览器安全限制，我们无法与dapp通信在file：//上运行。请使用本地服务器进行开发。

没有webpack-dev-server找不到带有Webpack Build的Web3

1 个答案: