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 react-scripts@4.0.3 即可

解决方法 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/],
```

提示：如果没有将 webpack config 从 node_modules 里暴露出来，直接在项目根目录创建 webpack.config.js 文件去配置无法解决此 bug

[经验] React 17 和 comsjs 冲突的解决

Bug 描述

复现步骤

Bug 原因

解决方法 1

解决方法 2