Bug描述

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

  Compiled with problems:X
  
  ERROR in ./node_modules/cipher-base/index.js 3:16-43
  
  Module not found: Error: Can't resolve 'stream' in '/Users/eason/Desktop/untitled folder/react17-cosmjs-conflect2/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/hash-base/node_modules/safe-buffer/index.js 4:13-30
  
  Module not found: Error: Can't resolve 'buffer' in '/Users/eason/Desktop/untitled folder/react17-cosmjs-conflect2/node_modules/hash-base/node_modules/safe-buffer'
  
  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: { "buffer": require.resolve("buffer/") }'
      - install 'buffer'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { "buffer": false }
  
  ERROR in ./node_modules/libsodium/dist/modules/libsodium.js 49:23-46
  
  Module not found: Error: Can't resolve 'path' in '/Users/eason/Desktop/untitled folder/react17-cosmjs-conflect2/node_modules/libsodium/dist/modules'
  
  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: { "path": require.resolve("path-browserify") }'
      - install 'path-browserify'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { "path": false }
  
  ERROR in ./node_modules/readable-stream/lib/_stream_readable.js 46:13-37
  
  Module not found: Error: Can't resolve 'buffer' in '/Users/eason/Desktop/untitled folder/react17-cosmjs-conflect2/node_modules/readable-stream/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: { "buffer": require.resolve("buffer/") }'
      - install 'buffer'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { "buffer": false }
  
  ERROR in ./node_modules/readable-stream/lib/_stream_writable.js 70:13-37
  
  Module not found: Error: Can't resolve 'buffer' in '/Users/eason/Desktop/untitled folder/react17-cosmjs-conflect2/node_modules/readable-stream/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: { "buffer": require.resolve("buffer/") }'
      - install 'buffer'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { "buffer": false }
  
  ERROR in ./node_modules/readable-stream/lib/internal/streams/buffer_list.js 74:15-32
  
  Module not found: Error: Can't resolve 'buffer' in '/Users/eason/Desktop/untitled folder/react17-cosmjs-conflect2/node_modules/readable-stream/lib/internal/streams'
  
  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: { "buffer": require.resolve("buffer/") }'
      - install 'buffer'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { "buffer": false }
  
  ERROR in ./node_modules/ripemd160/index.js 3:13-37
  
  Module not found: Error: Can't resolve 'buffer' in '/Users/eason/Desktop/untitled folder/react17-cosmjs-conflect2/node_modules/ripemd160'
  
  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: { "buffer": require.resolve("buffer/") }'
      - install 'buffer'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { "buffer": false }
  
  ERROR in ./node_modules/safe-buffer/index.js 2:13-30
  
  Module not found: Error: Can't resolve 'buffer' in '/Users/eason/Desktop/untitled folder/react17-cosmjs-conflect2/node_modules/safe-buffer'
  
  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: { "buffer": require.resolve("buffer/") }'
      - install 'buffer'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { "buffer": false }
  
  ERROR in ./node_modules/string_decoder/node_modules/safe-buffer/index.js 4:13-30
  
  Module not found: Error: Can't resolve 'buffer' in '/Users/eason/Desktop/untitled folder/react17-cosmjs-conflect2/node_modules/string_decoder/node_modules/safe-buffer'
  
  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: { "buffer": require.resolve("buffer/") }'
      - install 'buffer'
  If you don't want to include a polyfill, you can use an empty module like this:
      resolve.fallback: { "buffer": false }

复现步骤

1. 新建react项目

   npx create-react-app react17-cosmjs-conflect

2. 安装@cosmjs/amino

   npm i @cosmjs/amino

3. 在/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();

4. 运行

   npm run start

5. 报错如开篇所示

Bug原因

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

解决方法1

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

解决方法2

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

   npm run eject

2. 安装这4个包：

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

3. 根据报错提示配置 /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")
   }

4. 这时候再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