Error: ReferenceError: ReadableStream is not defined

如图,记录下。
环境

"vue": "^3.2.47"

"element-plus": "^2.3.6"

"vite-plugin-qiankun": "^1.0.15"

"vite": "^4.3.9"

解决方式一:

有人这么说:(我这里并没有好用)

"vite-plugin-qiankun": "1.0.15" 这个版本已经用了一年多,今天突然打包时报错报错原因是引用了undici ,我发现是包里引用了cheerio库 "cheerio": "^1.0.0-rc.10" ,cheerio 3天前更新了最新版本1.0.0之后。就出现该问题

需要指定cheerio版本,在package.json 添加 resolutions 字段,指定 cheerio 的版本:

resolutions是和 dependencies同级的

"resolutions": {
     "cheerio": "1.0.0-rc.12"
}

解决方式二:

有人这么说:(我不愿意,是不是有点没办法了?但是方法确实可以)

升级node版本 18+(我这里本身16.15.0)

解决方式二:

有人这么说:(我采用的)

删除 node_modules
删除 package-lock.json

执行 npm cache clean -f

执行 npm install

执行 npm i cheerio@1.0.0-rc.10

以上到此就算是解决了:Error: ReferenceError: ReadableStream is not defined
 

这时候或许会报警告:

Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

大致意思是:在vue3+vite项目中,使用低sass版本低于2.0.0的,会有上面这个警告

解决方式:(我用的是方法二)

方法一:

export default defineConfig(({ mode }) => {
  ``````
  return {
    ``````
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler' // or "modern"
        },
      },
    },
    ``````
  }
  ``````
})

方法二:

export default defineConfig(({ mode }) => {
  ``````
  return {
    ``````
    css: {
      preprocessorOptions: {
        scss: {
          silenceDeprecations: ['legacy-js-api'],
        },
      },
    },
    ``````
  }
  ``````
})

这个时候,基本解决了以上问题。如有其他错误欢迎探讨!!!

### 解决构建时 `IntersectionObserver` 未定义的错误 当遇到 `ReferenceError: IntersectionObserver is not defined` 的错误时,通常是因为当前环境不支持 `IntersectionObserver` API 或者该特性尚未被加载。为了确保代码能够在所有环境中正常运行,可以采取以下几种解决方案: #### 方法一:使用 polyfill 库 引入第三方库来填补浏览器兼容性的空白是一个常见做法。可以通过引入 `intersection-observer` 这样的polyfill 来解决问题。 ```html <script src="https://cdn.jsdelivr.net/npm/intersection-observer@0.7.0/intersection_observer.js"></script> ``` 这样可以在旧版浏览器中也获得对 `IntersectionObserver` 的支持[^2]。 #### 方法二:检测并回退 在创建 `IntersectionObserver` 实例之前先检查其是否存在,如果不存在则提供替代方案或警告信息。 ```javascript if ("IntersectionObserver" in window) { const observer = new IntersectionObserver(handleIntersection); } else { console.warn('IntersectionObserver 不受当前浏览器支持'); } ``` 这种方法能够优雅降级,在不具备条件的情况下给出提示而不是直接抛出异常。 #### 方法三:配置 Webpack 构建工具链 对于现代前端项目来说,可能是在特定环境下(如Node.js服务端渲染)遇到了这个问题。此时应该调整Webpack等打包工具设置,确保目标环境包含了所需的功能。 例如修改 `.browserslistrc` 文件指定最低限度的目标浏览器版本;或者安装相应插件让 Babel 自动注入必要的 polyfills: ```json { "presets": [ ["@babel/preset-env", { "useBuiltIns": "entry", "corejs": 3, "targets": "> 0.25%, not dead" }] ] } ``` 这会使得编译后的代码自动包含所需的填充逻辑,从而避免因缺少原生API而导致的问题。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值