typescript - Webpack - 导入 web3,找不到模块 http
问题描述
我正在开发一个带有 webpack 和基于 web 组件(lit-library)的 UI 的小型 Dapp。为了捆绑文件,我使用 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 控制台中。
包.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 导入的存储库。
我尝试为 web3 安装旧版本,但它对我不起作用。有人可以帮忙吗?
谢谢!!
解决方案
最后,经过长时间的研究,我找到了解决方案。在 webpack v5.xx 中,像 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 导入运行良好。
推荐阅读
- c# - 如何在 Prism 7 中自动创建 ViewModel
- sql-server - 在 Azure 平台上托管数据仓库的建议
- sql - 无法查看创建的分区
- git - 将存储库推送到 Github 时权限被拒绝
- python - 将标签添加到 tkinter 网格的顶部?
- javascript - fullcalendar 并非所有事件都显示在议程周视图中
- r - 带有模型矩阵输入的惩罚因子
- python - 我可以将变量挂钩到自定义非处理块吗?
- javascript - 如果字符串存在于javascript中的其他元素中,我想从字符串数组中删除一个元素
- vue.js - 如何使用 dom-to-image 库在服务器 vuejs 中发送图像?