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

<think>我们正在解决NocoBase客户端模块 &#39;react-device-detect&#39; 找不到的问题。错误信息为:`NocoBase client error: Can&#39;t resolve &#39;react-device-detect&#39; in @nocobase/client/es`。 这个错误通常发生在Node.js项目(或使用webpack等打包工具的项目)中,当尝试导入一个未安装的npm包时。因此,我们需要检查项目是否已经安装了`react-device-detect`包。 解决步骤: 1. **确认包是否安装**: 首先,我们需要检查项目的`package.json`文件中是否包含`react-device-detect`依赖。如果不存在,则需要安装它。 2. **安装缺失的包**: 如果确认未安装,我们可以使用yarn或npm来安装这个包。 使用yarn: ```bash yarn add react-device-detect ``` 或者使用npm: ```bash npm install react-device-detect ``` 3. **重新启动开发服务器**: 安装完成后,重新启动开发服务器,以确保新的依赖被正确加载。 4. **如果已经安装但仍然报错**: 如果已经安装了该包,但是仍然报错,那么可能是由于包安装不完整或者缓存问题。可以尝试以下步骤: - 删除`node_modules`文件夹和`yarn.lock`(或`package-lock.json`)文件。 - 重新运行`yarn install`或`npm install`。 - 重新启动项目。 5. **检查导入方式**: 确保在代码中正确导入`react-device-detect`。通常,应该这样导入: ```javascript import { ... } from &#39;react-device-detect&#39;; ``` 请检查导入路径是否正确,以及是否使用了正确的模块导出名称。 6. **检查项目配置**: 如果项目使用了webpack等构建工具,检查是否有特殊的别名(alias)配置,导致模块解析路径错误。 7. **版本兼容性问题**: 如果问题仍然存在,可能是由于`react-device-detect`的版本与项目中其他依赖不兼容。可以尝试安装特定版本(比如较旧的稳定版本): ```bash yarn add react-device-detect@版本号 ``` 8. **查看官方文档**: 参考`react-device-detect`的官方文档(如果有的话),确认是否有特殊的安装或使用要求。 由于错误信息指向的是`@nocobase/client/es`,这可能是NocoBase客户端代码中引用了`react-device-detect`,但未正确安装。因此,我们按照上述步骤进行排查。 注意:在NocoBase项目中,我们通常使用yarn作为包管理器,所以推荐使用yarn命令。 让我们尝试安装`react-device-detect`: ```bash yarn add react-device-detect ``` 然后重新启动项目。 如果问题解决,则完成;如果问题依旧,请按照上述步骤进一步排查。 另外,考虑到NocoBase是一个开源项目,我们也可以查看其官方文档或GitHub issues,看是否有类似的问题解决方案。 希望这些步骤能帮助你解决问题。</think>### 解决 NocoBase 客户端模块 "react-device-detect" 找不到的问题 当遇到 `Can&#39;t resolve &#39;react-device-detect&#39; in @nocobase/client/es` 错误时,说明 NocoBase 在构建过程中无法找到指定的 npm 包。以下是完整的解决步骤: --- #### 1. **安装缺失的依赖包** 在项目根目录执行安装命令: ```bash yarn add react-device-detect # 或使用 npm npm install react-device-detect ``` > 该包提供设备检测功能(如区分移动/桌面设备)[^1] --- #### 2. **清理构建缓存** 删除现有构建文件和缓存: ```bash # 清理构建产物 rm -rf node_modules/.cache rm -rf dist rm -rf .eslintcache # 重新安装依赖 yarn install --force # 或 npm install --force ``` --- #### 3. **检查 Webpack 配置** 在 `webpack.config.js` 中添加别名解析(如 NocoBase 内部引用路径异常): ```javascript module.exports = { resolve: { alias: { &#39;react-device-detect&#39;: path.resolve(__dirname, &#39;node_modules/react-device-detect&#39;) } } } ``` --- #### 4. **验证 TypeScript 类型声明** 在 `src/global.d.ts` 中添加类型声明: ```typescript declare module &#39;react-device-detect&#39; { export const isMobile: boolean; export const isDesktop: boolean; // 添加其他需要导出的类型 } ``` --- #### 5. **检查 NocoBase 插件配置** 如果使用插件系统,在 `plugins/my-plugin/src/client.ts` 中确保正确导入: ```typescript import { isMobile } from &#39;react-device-detect&#39;; export const MyPluginProvider = (props) => { return isMobile ? <MobileView /> : <DesktopView />; } ``` --- #### 6. **更新 NocoBase 版本(可选)** 若问题持续存在,可能是版本兼容性问题: ```bash yarn upgrade @nocobase/client@latest ``` --- ### 常见原因总结 | 原因 | 解决方案 | |---------------------|----------------------------| | 依赖未安装 | 执行 `yarn add react-device-detect` | | 构建缓存残留 | 清理 `node_modules/.cache` | | 路径解析错误 | 配置 Webpack alias | | TypeScript 类型缺失 | 添加全局类型声明 | | 版本冲突 | 升级 NocoBase 到最新版本 | > 完成上述步骤后,重启开发服务器:`yarn dev` 或 `npm run dev`
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值