[英]Webpack 5 Errors - Cannot Resolve 'crypto', 'http', and 'https' in ReactJS Project
[英]Webpack Errors - Cannot Resolve 'crypto', 'http', and 'https' in Vue.js
問題背景
我正在嘗試將 Wallet Connect 添加到我們的項目(Vue.js)中,在此處形成: https ://docs.walletconnect.com/quick-start/dapps/web3-provider,我使用此命令安裝它。
將其導入我的 js 文件中
import Web3 from 'web3'
import WalletConnectProvider from '@walletconnect/web3-provider'
它顯示了這些錯誤:
ERROR Failed to compile with 7 errors
These dependencies were not found:
* crypto in ./node_modules/eth-lib/lib/bytes.js, ./node_modules/web3-eth-accounts/lib/index.js and 1 other
* http in ./node_modules/xhr2-cookies/dist/xml-http-request.js
* https in ./node_modules/xhr2-cookies/dist/xml-http-request.js
To install them, you can run: npm install --save crypto http https
嘗試
我安裝這些軟件包。
npm i crypto-browserify
npm i https-browserify
npm i stream-http
然后編輯我的vue.config.js
文件:
resolve: {
fallback: {
crypto: require.resolve('crypto-browserify'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
},
},
並且錯誤變為:
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
configuration.resolve has an unknown property 'fallback'.
These properties are valid:
object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, concord?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }
這是我的package.json
文件的樣子:
{
"dependencies": {
"@walletconnect/web3-provider": "^1.7.8",
"crypto-browserify": "^3.12.0",
"https-browserify": "^1.0.0",
"os": "^0.1.2",
"stream": "^0.0.2",
"stream-http": "^3.2.0",
"vue": "^2.6.10",
"web3": "^1.7.3",
},
"devDependencies": {
"@vue/cli-service": "^3.7.0",
"webpack": "^4.39.3",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^4.2.1",
"webpack-node-externals": "^1.7.2",
"webpack-plugin-hash-output": "^3.2.1",
"webpack-spritesmith": "^1.0.1",
}
}
而我的node版本是v10.24.1,暫時還不能升級。
v10.24.1
從上面可以看出,我已經從錯誤中安裝了建議的包( crypto-browserify
、 stream-http
和https-browserify
),並將它們包含在vue.config.js
中。
我該如何解決這個問題?
您正在使用 Webpack 4。 fallback
選項僅適用於 Webpack >=5.0.0
及以后的版本。
對於 Webpack 4,考慮使用alias
選項。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.