Bug 描述

react 17 引入 @cosmjs/amino 运行，报错如下：

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.

复现步骤

新建 react 项目

npx create-react-app react17-cosmjs-conflect

安装 @cosmjs/amino
```
npm i @cosmjs/amino 
```

在 /src/index.js 引入 @cosmjs/stargate

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import {decodeBech32Pubkey} from '@cosmjs/amino' console.log(decodeBech32Pubkey) ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); reportWebVitals();

运行
```
npm run start 
```
报错如开篇所示

Bug 原因

npx create-react-app 命令创建的 React17 默认调用的是 webpack5 ，相比 webpack4 ，精简了很多自带的包，需要手动安装才行

解决方法 1

将 react-scripts 由默认的 5.0.0 改为 4.0.3 ，npm i [email protected] 即可

解决方法 2

将 react 17 的 webpack config 从 node_modules 里暴露出来，如果提示 git uncommitted 就先 commit 一下
```
npm run eject 
```

安装这 4 个包：

npm i stream-browserify buffer path-browserify crypto-browserify

根据报错提示配置 /config/webpack.config.js

搜索“resolve:”，在 resolve 内添加 fallback 节点，内容如下

fallback: { "stream": require.resolve("stream-browserify"), "buffer": require.resolve("buffer/"), "path": require.resolve("path-browserify"), "crypto": require.resolve("crypto-browserify") }

这时候再 npm run start 运行就没有 error 了，但是有 40 个 warning ，都是关于 cosmjs 缺少 source map 的，如果不想看到这个错误，可以在跟 resolve 节点同级的地方添加以下属性，搜索“resolve:”，在上一行放：
```
ignoreWarnings: [/Failed to parse source map/], 
```