编译有问题，加密; React JS中未发现错误

Question

汇编的问题：

中的错误

错误 lib'

打破变化：webpack＆lt; 5用于默认情况下包括node.js核心模块的polyfills。 情况不再如此。验证是否需要此模块并为其配置多填充。

如果要包含polyfill，则需要： - 添加后备'Resolve.Fallback：{“ crypto”：require.resolve（“ crypto-browserify”）}' - 安装“加密浏览” 如果您不想包含polyfill，则可以使用这样的空模块： resolve.fallback：{“ crypto”：false}

每次我启动react-app local Server时，即使我已经安装了所有依赖项，系统也会标记与加密模块有关的几个错误。我什至尝试了解决：{ 后备：{crypto：false}， }，在我的webpack config.js文件中，但无效。请引导我。

  **App.js:**
    
        import React, {useEffect, useState} from 'react';
        import path from 'path';
        import logo from './logo.svg';
        import './App.css';
        import Web3 from 'web3';
        import Mycontractabi from "./contracts/Mycontract1.json";
        
        function App() {
         
         useEffect(()=>{
            loadWeb3();
            loadBlockchaindata();
          },[])
        
          const loadWeb3=async()=>{
            if (window.ethereum){
              window.web3=new Web3(window.ethereum);
              await window.ethereum.enable();    
            }
            else if (window.web3){
              window.web3=new Web3(window.web3.currentProvider);
            }
            else{
              window.alert("Please install Metamask!");
            }
          }
        
        
          const loadBlockchaindata=async()=>{
            const web3=window.web3;
            const accounts=web3.eth.getAccounts();
            const account=accounts[0];
            const networkId= await web3.eth.net.getId();
            const networkData=Mycontractabi.networks[networkId];
            if(networkData){
              const project=new web3.eth.Contract(Mycontractabi.abi,networkData);
              console.log(project);
            }
            else{
              window.alert("Smart contract is not deployed in current network!");
            }
        
          }
          
          return (
            <div className="App">
              <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                  Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                  className="App-link"
                  href="https://reactjs.org"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Learn React
                </a>
              </header>
            </div>
          );
        }
        
        export default App;
    
 **package.json**
    
    {
      "name": "phase2",
      "version": "0.1.0",
      "private": true,

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "assert": "^2.0.0",
    "crypto": "^1.0.1",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^3.1.9-1",
    "crypto-random-string": "^5.0.0",
    "http": "0.0.1-security",
    "https": "^1.0.0",
    "https-browserify": "^1.0.0",
    "os": "^0.1.2",
    "path": "^0.12.7",
    "path-browserify": "^1.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "stream": "0.0.2",
    "stream-http": "^3.2.0",
    "url": "^0.11.0",
    "web-vitals": "^2.1.4"
  },
  "browser": {
    "crypto": false,
    "stream": false
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "crypto": [
        "node_modules/crypto-js"
      ]
    } 
  }
}

Answer 1

答案可能太简单了，但是您npm install在本地打开之前是否？