如何使用 create-react-app 创建 React 应用程序（包括 Web3）？我收到模块未找到错误。重大变更：使用了 webpack < 5

2023-12-20

我是 Web3 的新手，我正在尝试创建一个与 web3 集成的 React 应用程序。以下是我在 Ubuntu 中遵循的步骤。

    create-react-app app_name
    cd app_name
    npm i --save web3
    npm start

一切正常，我得到了反应应用程序主页。

现在，只要我将以下代码行放入 App.js 中，应用程序就会崩溃，并收到以下长错误。（见下文，第 5 行）

import Web3 from "web3";

我得到的错误如下。

Compiled with problems:X

ERROR in ./node_modules/cipher-base/index.js 3:16-43

Module not found: Error: Can't resolve 'stream' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/cipher-base'

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: { "stream": require.resolve("stream-browserify") }'
    - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "stream": false }


ERROR in ./node_modules/eth-lib/lib/bytes.js 9:193-227

Module not found: Error: Can't resolve 'crypto' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/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 }


ERROR in ./node_modules/ethereumjs-util/dist.browser/account.js 71:31-48

Module not found: Error: Can't resolve 'assert' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/ethereumjs-util/dist.browser'

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 }


ERROR in ./node_modules/ethereumjs-util/dist.browser/address.js 14:31-48

Module not found: Error: Can't resolve 'assert' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/ethereumjs-util/dist.browser'

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 }


ERROR in ./node_modules/ethereumjs-util/dist.browser/object.js 46:31-48

Module not found: Error: Can't resolve 'assert' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/ethereumjs-util/dist.browser'

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 }


ERROR in ./node_modules/web3-eth-accounts/lib/index.js 31:74-91

Module not found: Error: Can't resolve 'crypto' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/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 }


ERROR in ./node_modules/web3-eth-accounts/node_modules/eth-lib/lib/bytes.js 7:193-227

Module not found: Error: Can't resolve 'crypto' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/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 }


ERROR in ./node_modules/web3-providers-http/lib/index.js 30:11-26

Module not found: Error: Can't resolve 'http' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/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 }


ERROR in ./node_modules/web3-providers-http/lib/index.js 32:12-28

Module not found: Error: Can't resolve 'https' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/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 }


ERROR in ./node_modules/web3-providers-ws/lib/helpers.js 11:12-26

Module not found: Error: Can't resolve 'url' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/node_modules/web3-providers-ws/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: { "url": require.resolve("url/") }'
    - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "url": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/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 }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/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 }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/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 }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 43:10-24

Module not found: Error: Can't resolve 'url' in '/home/gkv/Stuff/Tutorial/Projects/react/lottery-react-new/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: { "url": require.resolve("url/") }'
    - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "url": false }

我尝试了多个 stackoverflow 帖子，但似乎都没有正确的解决方案。

React 和 Angular 中的错误库 web3 和 Webpack [关闭] https://stackoverflow.com/questions/70382479/error-library-web3-and-webpack-in-react-and-angular
找不到模块：错误：无法解析“C:\dev\jszip-test\node_modules\jszip\lib”中的“流” https://stackoverflow.com/questions/55601669/module-not-found-error-cant-resolve-stream-in-c-dev-jszip-test-node-modul
我在 React js 17.0.1 中从 web3 导入 Web3 时收到此错误。如何解决此问题 https://stackoverflow.com/questions/70401928/i-am-getting-this-error-whilr-importing-web3-from-web3-in-react-js-17-0-1-how-to

如果有人可以提供帮助那就太好了。我已经为此苦苦挣扎了5天。

Web3 github页面在这里提供了一个解决方案：https://github.com/ChainSafe/web3.js#web3-and-create-react-app https://github.com/ChainSafe/web3.js#web3-and-create-react-app

该解决方案利用了react-app-rewired包：https://www.npmjs.com/package/react-app-rewired https://www.npmjs.com/package/react-app-rewired

Polyfills 可以通过 node-polyfill-webpack-plugin 安装：https://www.npmjs.com/package/node-polyfill-webpack-plugin https://www.npmjs.com/package/node-polyfill-webpack-plugin

该解决方案的优点：

无需弹出并修改配置文件 --> react-scripts 构建仍然可以工作
无需将反应脚本降级到较低版本

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 create-react-app 创建 React 应用程序（包括 Web3）？我收到模块未找到错误。重大变更：使用了 webpack < 5 的相关文章

如何正确地将节点从引用传递到上下文？

我正在尝试将节点从引用传递到上下文但是因为我在第一次渲染后没有重新渲染所以传递的节点是null 我考虑了两种变体但我认为它们不是最好的 To pass ref代替ref current 但在用例中我将被迫使用类似的东西contex
语法错误：未知：默认情况下不支持命名空间标签

尝试将 svg 下载为 React 组件时出现以下错误语法错误未知默认情况下不支持命名空间标签 React 的 JSX 不支持命名空间标签您可以打开 throwIfNamespace 标志来绕过此警告 import React fr
如何跨多个 React Redux 组件使用 requestAnimationFrame 实现游戏循环？

努力思考最好的解决办法我可以使用递归调用requestAnimationFrame有一个游戏循环 export interface Props name string points number onIncrement gt void o
React Uncaught TypeError：this.state.messages.map 不是一个函数

我正在开发一个 React 应用程序并且遇到了此映射函数的问题 render const messages this state messages map message gt return li message text li retu
使用 Enzyme 测试 .map 函数内部的 JSX

假设我有这张表 table thead tr th cat name th tr thead tbody cats map cat gt return tr td cat name td tr tbody table 我如何使用酶测试map
React - 如何在react-select中设置默认值

I used 反应选择 https github com JedWatson react select在我的应用程序中显示选择框下面是我选择的代码
Hooks setState 总是落后一步

我使用了 useState 钩子应该在每次下拉按钮的值发生变化时触发设置状态方法在钩子中但设置状态总是落后一步我已经看到了使用基于类的组件的传统 setState 方法的解决方案但是如何使用钩子解决此问题useState
Webpack：如何将 javascript 注入 HTML 而不是单独的 JS 文件

有没有办法让 webpack 将输出注入 HTML 而不是单独的文件我不得不使用html webpack inline source plugin https github com DustinJackson html webpack i
gatsbyjs、reactjs - 为什么组件渲染两次而图像没有出现？

我是新来的gatsbyjs并使用 v2 我有 3 个组件加载器标题和布局 layout js import React from react import Helmet from react helmet import StaticQu
保留对 React 状态变量的“引用”

据我所知 Javascript 中没有指针我有以下问题但我想知道是否有一个解决方案让我无法解决解决方案可能是普通的 Javascript 或者像 Context API 这样的 React js 钩子 useContext 或者更多
webpack 术语中的“webpack 模块”到底是什么？

我是 webpack 的新手目前正在尝试理解基本概念查看官方文档页面上Concepts https webpack js org concepts 它使用模块术语并提供了阅读页面上有关模块的更多信息的链接Modules https w
在 React 中过滤数据的最佳方法是什么？

我正在建立该国餐馆的目录该 API 返回一组对象每个对象都包含诸如restaurantName restaurantLocation restaurantPriceRange 等字段我想创建一个过滤组件它将餐厅数组减少到仅包含那些符
如何编写具有依赖状态的 redux 减速器

我正在开发一个 React Redux 应用程序它允许将小部件添加到页面并在 2D 空间中进行操作要求可以同时选择和操作多个小部件我当前状态树的简化版本如下所示 widgets widget 1 x 100 y 200 widge
使用 webpack 保留输出目录中的文件夹结构

我有以下文件夹结构 index html app index tsx 与 webpack 捆绑后我希望有以下输出目录并将bundle js注入到index html中 dist index html dist app bundle js
从 git repo 拉取后出现白屏死机（React JS、Nginx）

每当我从 master 分支执行 git pull 到服务器上时我所有的 React 文件似乎都消失了屏幕变成白色我发现的临时解决方法是删除浏览器 cookie 缓存和站点历史记录然后关闭浏览器并重试删除node modules
React 中的静态方法

我正在查看 React 文档并遇到了静态方法我想知道它在什么样的场景下可能有用但想不出有什么用在 React 中构建组件时是否存在静态方法有用的特定场景 defaultProps and propTypes是 React 组件的静态
React 函数组件与返回 React 元素的普通 JS 函数

假设我定义了一个简单的 React 功能组件如下所示 const Greeter1 name gt h1 Hello name h1 我还可以定义一个等效的普通 JS 函数它返回一个 React 元素如下所示 const Greete
如何在 Jest 测试中模拟 StatusBarManager.getHeight？

我正在使用 expo 34 并且反应本机用户界面库 https www npmjs com package react native ui lib来自 wix 并且在为我的组件设置笑话测试时遇到问题问题看起来出现在link https g
React.js this.props.data.map() 不是一个函数

我正在搞乱反应并尝试解析和渲染 json 对象现在我只是使用硬编码对象设置它以进行测试而不是从 ajax 调用中获取它
在 React 中使用 setTimeout() 并测试它

我意识到我一直在使用setTimeout 在我的项目中也许比我应该做的更多我进行了快速研究并浏览了 Github 上的一些开源 React 项目并决定我应该询问一下 I use setTimeout主要是为了更改类名或添加样式以对

随机推荐

silverlight客户端可以访问存储在独立存储中的本地sql紧凑数据库吗

silverlight clr 是否支持访问位于 silverlight 应用程序的独立存储中的 sql 紧凑数据库如果是这样任何指向代码示例的指针我想缓存在以前的会话中从服务器检索到的信息即使它存储在独立存储中在 SQL Ser
序列化和反序列化 lambda

我想在机器 A 上序列化并在机器 B 上反序列化 python lambda 这有几个明显的问题 pickle 模块不会序列化或反序列化代码它仅序列化类方法函数的名称我在 google 找到的一些答案建议使用低级 marshal 模
为什么 jQuery 在 $.ajax 成功回调中吞掉异常？

看起来 jQuery 1 6 4 故意吞掉了 ajax 成功回调中的异常如果我这样做 get function console log doodoo 我在 Chrome 控制台中得到这个 Object doodoo 但如果我这样做的话 g
Conda 激活不起作用？

gonzo a packages conda env list conda environments ppo latest nohome jaan abhishek anaconda3 envs ppo latest root nohome
使用 R 计算季节性平均值的最优雅方法是什么？

我有均匀分布的时间序列和每日平均观测数据如何以最简单的方式计算季节性平均值季节应遵循气象术语 DJF 冬季十二月一月二月 MAM JJA 和 SON 这意味着 12 月的值来自 x 1 年这里很好地介绍了月均值的计算如何计算月
带显示的 Span 元素：inline-flex 的高度比同级 Span 更大

在使用 Flex 容器时我注意到 Chrome 和 Firefox 的渲染高度都比静态同级容器高 1px 这是代码 container background color yellow border 1px solid red main b
自动换行不适用于 chrome 中 fieldset 内的 div

在linux chrome 27 0 1453 93和windows chrome 27 0 1453 94中尝试过示例位于http jsfiddle net SruNd 4 http jsfiddle net SruNd 4 CSS m
如何删除集合中的重复项？

我在 Laravel 中有收藏 Collection 450 items array 2 0 gt Announcement 533 1 gt Announcement 553 这是相同的项目如何删除其中之一完整代码是 public f
使用 Spring Rest 模板时 HttpConnection 的默认保持活动时间

我想知道在通过 Spring 休息模板创建新连接之前 HttpConnection 在不活动时保持活动状态多长时间我查看了默认的连接超时和读取超时参数但我相信这些参数是在由于某些故障等而未建立连接时的连接超时上下文中使用的我正在寻找的
具有可逆属性的校验和/哈希函数

我正在寻找具有以下属性的特定哈希码我不知道任何这样的哈希码也不知道是否可以做这样的事情只是想把它放在那里看看人们怎么说我有两个数据库宽松使用的术语不要想到 SQL 或任何类似的东西一个主数据库和一个备份数据库需要保持两个数
javac 在 ubuntu 终端中不起作用

当我尝试编译 java 程序时javac 我收到错误 The program javac can be found in the following packages default jdk ecj gcj 4 6 jdk gcj 4 7
如何列出 Enum 的成员

如何在代码中列出Enum的成员我有以下枚举 Public Enum TestEnum As int32 First 0 Second 2 Third 4 Fourth 6 End Enum 我尝试通过以下代码列出 TestEnum 的所有
如何将 MediaBrowserService 与小部件一起使用？

我的服务扩展了 MediaBrowserService 类它响应某些 MediaController 操作例如getMediaController getTransportControls onPlay 但是我没有找到从 Widget
安装的构建工具修订版 30.0.3 已损坏

当我构建 Android 应用程序时出现错误已安装的构建工具修订版 30 0 3 已损坏使用 SDK 管理器删除并再次安装我尝试通过更新 sdk 管理器来修复此问题但它不起作用我该如何修复这个错误尝试安装稳定版SDK 构建工具
在 Oracle 对象类型构造函数中设置默认值

我想在 Oracle 对象类型中设置默认值但它要求所有属性都需要在构造函数中传递无论如何这样我就可以在构造函数中仅传递需要默认值的必需属性请参阅以下详细信息 SQL gt CREATE TYPE TYPE SUB AS OBJECT
Java 8 Streams：如何调用一次 Collection.stream() 方法并检索具有不同字段的多个聚合值的数组

我从 Java 8 中的 Stream API 开始这是我使用的 Person 对象 public class Person private String firstName private String lastName private
@IBDesignable 视图不会在 Interface Builder 中绘制背景颜色

我很好奇为什么这不设置backgroundColor to red IBDesignable class CustomLabel UIView let view UIView func setup backgroundColor UICol
Freebase API：超出用户速率限制

我的应用程序出现问题并且超出了每秒用户速率这是我收到的错误 error errors domain usageLimits reason userRateLimitExceededUnreg message User Rate Limi
分配 6xNxN 数组

我有一个变量N 我需要一个6xNxN array 像这样的事情 int arr 6 N N 但显然这是行不通的我不确定如何分配它以便我可以访问例如arr 5 4 4 if N是 5 并且arr 5 23 23 if N is 24 注
如何使用 create-react-app 创建 React 应用程序（包括 Web3）？我收到模块未找到错误。重大变更：使用了 webpack < 5

我是 Web3 的新手我正在尝试创建一个与 web3 集成的 React 应用程序以下是我在 Ubuntu 中遵循的步骤 create react app app name cd app name npm i save web3 npm

如何使用 create-react-app 创建 React 应用程序（包括 Web3）？我收到模块未找到错误。重大变更：使用了 webpack < 5

如何使用 create-react-app 创建 React 应用程序（包括 Web3）？我收到模块未找到错误。重大变更：使用了 webpack < 5 的相关文章

随机推荐

热门标签