react中引入web3报错

报错信息

 解决方法  

Web3 and Create-react-app

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution

  • Install react-app-rewired and the missing modules

1.下载以下依赖 

yarn: 

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

npm:  

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
  • Create config-overrides.js in the root of your project folder with
### React 创建项目时遇到的错误及其解决方案 #### 使用 `createRoot` 替代 `ReactDOM.render` 在 React 18 中,官方不再支持使用 `ReactDOM.render` 来渲染应用。取而代之的是引入了新的并发模式API——`createRoot`。当开发者继续使用旧版API时,浏览器控制台会出现警告信息: ```javascript react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it’s running React 17. Learn more: https://reactjs.org/link/switch-to-createroot [^2] ``` 为了消除该提示并利用最新特性,应当按照如下方式修改入口文件中的代码片段: ```jsx // 原有写法 (已废弃) import { render } from &#39;react-dom&#39;; render(<App />, document.getElementById(&#39;root&#39;)); // 新增写法 (推荐做法) import { createRoot } from &#39;react-dom/client&#39;; // 导入新模块 const container = document.getElementById(&#39;root&#39;); const root = createRoot(container); // 创建根节点实例 root.render(<App />); // 渲染应用程序 ``` #### 处理 TypeScript 类型定义缺失问题 对于采用TypeScript构建的应用程序而言,在尝试导入某些特定版本下的`@types/react-dom`包时可能会遭遇类似下面这样的编译期报错: ``` Module &#39;".../@types/react-dom/client"&#39; has no default export.[^3] ``` 这通常是因为所依赖的类型声明库与当前使用的React核心库不匹配造成的。此时可以考虑执行以下操作来解决问题: * 升级或降级对应的`@types/react-*`系列npm包至兼容版本; * 或者直接移除不必要的显式指定默认导出语句。 例如原先是这样写的: ```typescript import ReactDOM from "react-dom/client"; ``` 改为按命名空间形式引入即可规避此问题: ```typescript import * as ReactDOMClient from &#39;react-dom/client&#39;; const client = ReactDOMClient.createRoot(document.getElementById(&#39;root&#39;)); client.render(<App />); ``` #### 安装调试工具辅助排查 除了上述技术层面调整外,实际开发过程中难免还会碰到各种棘手状况。这时借助专业的浏览器扩展可以帮助更高效定位故障原因。特别是像[React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-CN)这类专门为前端框架定制化的插件就显得尤为重要[^4]。 安装完成后重启页面刷新缓存再试一次往往能带来意想不到的效果;另外也可以通过它直观查看虚拟DOM结构变化情况从而进一步优化性能表现。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值