reactjs - 无法将 web3 添加到 React 项目

Question

我正在尝试将 Web3 添加到 React 项目。
我已经初始化了一个新项目

gatsby new

然后，我已经安装了 web3

npm install --save web3

当我在 index.js 中包含 web3 时

import Web3 from 'web3'

如果我打电话

gatsby develop

我有一些奇怪的错误:

ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227Module not found: Error: Can't resolve 'crypto' in '/home/test/gatsby/test/test/node_modules/eth-lib/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'- install 'crypto-browserify'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "crypto": false } @ ./node_modules/swarm-js/lib/api-browser.js 32:12-40 @ ./node_modules/web3-bzz/lib/index.js 24:12-31 @ ./node_modules/web3/lib/index.js 34:10-29 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/ethereumjs-util/dist/account.js 4:13-30Module not found: Error: Can't resolve 'assert' in >'/home/test/gatsby/test/test/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'- install 'assert'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "assert": false } @ ./node_modules/ethereumjs-util/dist/index.js 29:13-33 @ ./node_modules/ethereumjs-tx/dist/transaction.js 14:24-50 @ ./node_modules/ethereumjs-tx/dist/index.js 3:20-44 @ ./node_modules/web3-eth-accounts/lib/index.js 35:18-54 @ ./node_modules/web3-eth/lib/index.js 34:15-43 @ ./node_modules/web3/lib/index.js 30:10-29 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/ethereumjs-util/dist/object.js 4:13-30Module not found: Error: Can't resolve 'assert' in >'/home/test/gatsby/test/test/node_modules/ethereumjs-util/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'- install 'assert'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "assert": false } @ ./node_modules/ethereumjs-util/dist/index.js 45:13-32 @ ./node_modules/ethereumjs-tx/dist/transaction.js 14:24-50 @ ./node_modules/ethereumjs-tx/dist/index.js 3:20-44 @ ./node_modules/web3-eth-accounts/lib/index.js 35:18-54 @ ./node_modules/web3-eth/lib/index.js 34:15-43 @ ./node_modules/web3/lib/index.js 30:10-29 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/web3-eth-accounts/lib/index.js 30:76-93Module not found: Error: Can't resolve 'crypto' in '/home/test/gatsby/test/test/node_modules/web3->eth-accounts/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'- install 'crypto-browserify'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "crypto": false } @ ./node_modules/web3-eth/lib/index.js 34:15-43 @ ./node_modules/web3/lib/index.js 30:10-29 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227Module not found: Error: Can't resolve 'crypto' in '/home/test/gatsby/test/test/node_modules/web3-eth-accounts/node_modules/eth-lib/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'- install 'crypto-browserify'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "crypto": false } @ ./node_modules/web3-eth-accounts/lib/index.js 29:12-40 @ ./node_modules/web3-eth/lib/index.js 34:15-43 @ ./node_modules/web3/lib/index.js 30:10-29 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/web3-providers-http/lib/index.js 26:11-26Module not found: Error: Can't resolve 'http' in '/home/test/gatsby/test/test/node_modules/web3-providers-http/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'- install 'stream-http'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "http": false } @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48 @ ./node_modules/web3-core/lib/index.js 22:23-58 @ ./node_modules/web3/lib/index.js 29:11-31 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/web3-providers-http/lib/index.js 27:12-28Module not found: Error: Can't resolve 'https' in '/home/test/gatsby/test/test/node_modules/web3-providers-http/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'- install 'https-browserify'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "https": false } @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48 @ ./node_modules/web3-core/lib/index.js 22:23-58 @ ./node_modules/web3/lib/index.js 29:11-31 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 21:11-26Module not found: Error: Can't resolve 'http' in '/home/test/gatsby/test/test/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'- install 'stream-http'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "http": false } @ ./node_modules/xhr2-cookies/dist/index.js 6:9-38 @ ./node_modules/web3-providers-http/lib/index.js 25:11-49 @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48 @ ./node_modules/web3-core/lib/index.js 22:23-58 @ ./node_modules/web3/lib/index.js 29:11-31 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 22:12-28Module not found: Error: Can't resolve 'https' in '/home/test/gatsby/test/test/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'- install 'https-browserify'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "https": false } @ ./node_modules/xhr2-cookies/dist/index.js 6:9-38 @ ./node_modules/web3-providers-http/lib/index.js 25:11-49 @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48 @ ./node_modules/web3-core/lib/index.js 22:23-58 @ ./node_modules/web3/lib/index.js 29:11-31 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 23:9-22Module not found: Error: Can't resolve 'os' in '/home/test/gatsby/test/test/node_modules/xhr2-cookies/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'- install 'os-browserify'If you don't want to include a polyfill, you can use an empty module like this:resolve.fallback: { "os": false } @ ./node_modules/xhr2-cookies/dist/index.js 6:9-38 @ ./node_modules/web3-providers-http/lib/index.js 25:11-49 @ ./node_modules/web3-core-requestmanager/lib/index.js 46:18-48 @ ./node_modules/web3-core/lib/index.js 22:23-58 @ ./node_modules/web3/lib/index.js 29:11-31 @ ./src/pages/index.js 9:0-24 @ ./.cache/this_is_virtual_fs_path/$virtual/async-requires.js 21:11-23:5 @ ./.cache/app.js 17:0-52 28:0-70 30:27-40 28:0-70

webpack compiled with 10 errors

我尝试手动安装这些模块，将它们添加到 package.json 等中。但没有任何效果。
你能帮助我吗 ？
谢谢

Answer 1

不幸的是，大多数 Web3 堆栈严重依赖于服务器端不可用的窗口、浏览器和外部加密依赖项。这不仅是 Gatsby 的问题，还有其他 SSR 和静态站点生成器(例如 Next.js)的问题。
不过有一些解决方法。见 Using Client-Side Only Packages on Gatsby

使用不同的库或方法

通过 CDN 添加客户端包

使用可加载组件加载客户端依赖组件

仅在客户端使用 React.lazy 和 Suspense

根据您的要求，#1 可能不是一种选择。我使用 ethers 而不是 web3 取得了更好的成功。但是在某些时候，您可能会遇到与其他软件包类似的问题。
#2 和 3/4 的组合将是要走的路。
首先，删除导致问题的包 (web3) 并从 gatsby-browser.js 加载它们。或使用 react-helmet在使用它的页面/组件上。
gatsby-browser.js

const addScript = url => {
  const script = document.createElement("script")
  script.src = url
  script.async = true
  document.body.appendChild(script)
}

export const onClientEntry = () => {
  window.onload = () => {
    addScript("https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js")
  }
}

react Helm

<Helmet>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js" />
</Helmet>

您现在应该可以使用 web3。确保检查您是否在浏览器中运行，使用 typeof window !== "undefined" .一个完整的代码示例:

import React from 'react'
import { Helmet } from "react-helmet"

export default function Web3() {
    const [blockNr, setBlockNr] = React.useState()
    const isBrowser = typeof window !== "undefined"

    async function getBlockNumber() {
        console.log('Init web3')
        const web3 = new window.Web3('https://cloudflare-eth.com')
        const currentBlockNumber = await web3.eth.getBlockNumber()
        setBlockNr(currentBlockNumber)        
    }

    return (
        <div>
            {/* Can use either react-helmet or include the script from gatsby-browser */}
            <Helmet>
                <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js" />
            </Helmet>
            {isBrowser && 
                <div>
                    <p>Running in browser..</p>
                    <button onClick={getBlockNumber}>Get Block #</button>
                </div>
            }
            
            {blockNr && <span>{blockNr}</span>}
        </div>
    )
}

你可能仍然想加载东西 Lazy 或使用 loadable-components。例如。

const LazyWeb3BlockNr = React.lazy(() =>
  import("../components/Web3BlockNr")
)

在你的页面

<div>
    {typeof window !== "undefined" && 
        <React.Suspense fallback={<div />}>
            <LazyWeb3BlockNr />
        </React.Suspense>
    }
</div>

完整代码示例位于 https://github.com/wslyvh/web3-gatsby