Webpack

Question

我正在开发一个带有 webpack 的小型 Dapp 和一个基于 web 组件（lit-library）的 UI。为了捆绑文件，我使用 webpack 和 webpack-dev-server 来刷新页面。对我来说一切正常。

现在，我正在尝试使用 web3 与我的智能合约进行交互，但是当我导入 web3 并从中创建一个新实例时，出现以下错误：

    Uncaught Error: Cannot find module 'http'
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
xml-http-request.js:21:19
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        <anonymous>
        <anonymous>
        <anonymous>

此错误出现在我的 firefox 的控制台中。

package.json

{
  "name": "m-wallet-frontend",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.ts",
  "scripts": {
    "start": "webpack serve --open --mode=development",
    "dev": "webpack serve --mode=development",
    "build": "webpack --mode=production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^8.2.2",
    "css-loader": "^5.2.4",
    "style-loader": "^2.0.0",
    "ts-loader": "^9.1.1",
    "typescript": "^4.2.4",
    "webpack": "^5.36.0",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "html-webpack-plugin": "^5.3.1",
    "lit": "^2.0.0-rc.1",
    "lodash": "^4.17.21",
    "process": "^0.11.10",
    "web3": "^1.3.5",
    "web3-providers-http": "^1.3.5"
  }
}

webpack.config.json

const webpack = require('webpack')
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {

    entry: {
      main: path.resolve(__dirname, "src", "main.ts")
    },
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
      publicPath: "/dist/",
      clean: true
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [
      new HtmlWebpackPlugin({
        inject: true,
        template: path.resolve(__dirname, "public", "index.html")
      }),
      new webpack.ProvidePlugin({
        process: 'process/browser',
      }),
    ],
    devtool: 'inline-source-map',
    devServer: {
        contentBase: [
          path.join(__dirname, 'public'),
          path.join(__dirname, 'src'),
        ],  
        compress: true,
        hot: false
      }
  };

根据 web3-doc 我使用以下导入语句：

Import Web3 from 'web3';
let web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");

第一次出现错误后，我尝试了 node.js 方法：

const Web3 = require('web3')
let web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");

这里是没有 web3 导入的 repository。

我尝试为 web3 安装旧版本，但它对我不起作用。有人可以帮忙吗？

谢谢！！

Answer 1

经过长时间的研究，我终于找到了解决办法。使用 webpack v5.x.x 节点模块，如 http（在 web3 中是必需的）需要一个 polyfill 和一个 fallback 才能工作。所以，我在 webpack.config.js 中添加了以下内容：

 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
    {...},
    resolve: {
      {...},
      fallback: {
        "http": require.resolve("stream-http")
      }
    },
    plugins: [
      {...},
      new NodePolyfillPlugin()
    ],
  };

并安装以下软件包：

npm i -D stream-http
npm i -D node-polyfill-webpack-plugin

上面的 web3 导入运行良好。

Webpack - 导入 web3，找不到模块 http

Webpack - import web3, can't find module http

typescript

ethereum

webpack-dev-server

web3

package.json

webpack.config.json