react项目 Can‘t resolve ‘stream‘ in ‘.../node_modules/cipher-base‘ 问题解决

react项目安装Ipfs-api模块以后报如下错误。

Module not found: Error: Can't resolve 'stream' in '/Users/domino/VscodeWeb3Projects/imooc-on-blockchain/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 }
WARNING in ./node_modules/mutationobserver-shim/dist/mutationobserver.min.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/User/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/mutationobserver-shim/dist/MutationObserver.js' file: Error: ENOENT: no such file or directory, open '/Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/mutationobserver-shim/dist/MutationObserver.js'

ERROR in ./node_modules/ip/lib/ip.js 5:9-22
Module not found: Error: Can't resolve 'os' in '/Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/ip/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: { "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 }

原因：webpack <5 的版本曾经默认引入polyfills作为Nodejs核心模块，后来取消了。

解决方法：在nodejs.com查找 react-scripts的5.0以下的最新版本，将react-scripts的版本进行替换

#卸载react-scripts
% npm uninstall react-scripts

# 安装4.x react-scripts
% npm install react-scripts@4.0.3 --save

# 重新运行发现还需要安装 webpack 4.44.2版本的依赖
% npm run start

> imooc-on-blockchain@0.1.0 start
> react-app-rewired start


There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.44.2"

Don't try to install it manually: your package manager does it automatically.


#  装一下
% npm install webpack@4.44.2

# 再启动发现出现了hash计算问题，在启动脚本上需要加一个配置
% npm run start             

> imooc-on-blockchain@0.1.0 start
> react-app-rewired start

ℹ ｢wds｣: Project is running at http://192.168.3.6/
ℹ ｢wds｣: webpack output is served from 
ℹ ｢wds｣: Content not from webpack is served from /Users/domino/VscodeWeb3Projects/imooc-on-blockchain/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...

/Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/webpack/lib/NormalModule.js:417:16)
    at /Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/webpack/lib/NormalModule.js:452:10
    at /Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/webpack/lib/NormalModule.js:323:13
    at /Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/domino/VscodeWeb3Projects/imooc-on-blockchain/node_modules/babel-loader/lib/index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.8.0

启动脚本前增加 export NODE_OPTIONS=--openssl-legacy-provider

"scripts": {
    "start": "export NODE_OPTIONS=--openssl-legacy-provider && react-app-rewired start",

然后再启动就正常了，问题解决

参考文档

• https://stackoverflow.com/questions/70591567/module-not-found-error-cant-resolve-fs-in-react

• https://github.com/facebook/create-react-app/issues/11756