React项目编译报错：'CompressionStream'未定义问题求助

问题原因 #

编译阶段报'CompressionStream' is not defined，并非浏览器兼容性问题，而是代码检查工具（如ESLint）或TypeScript未将CompressionStream识别为浏览器全局API，误判其为未定义变量。

解决方案 #

方案1：修改ESLint配置 #

在项目ESLint配置文件（如.eslintrc.js或.eslintrc.json）中，将CompressionStream和DecompressionStream加入全局变量列表：

// .eslintrc.js
module.exports = {
  // 其他配置项...
  globals: {
    CompressionStream: 'readonly',
    DecompressionStream: 'readonly'
  }
};

也可在使用该API的代码上方添加单行注释声明全局变量：

/* global CompressionStream */
async function compressFile(file) {
  // 你的业务代码
}

方案2：显式通过window对象引用 #

直接用window.CompressionStream替代全局调用，让检查工具明确这是浏览器全局对象的属性：

async function compressFile(file) {
    const readableStream = await file.stream();
    const compressedReadableStream = readableStream.pipeThrough(new window.CompressionStream('gzip'));
    const compressedFile = await fileSave(new Response(compressedReadableStream), {
        fileName: file.name + '.gz',
        extensions: ['.gz'],
    });
    return compressedFile;
}

方案3：TypeScript项目补充类型定义 #

若为TypeScript项目，先确保tsconfig.json的compilerOptions.lib包含"ESNext"和"DOM"：

{
  "compilerOptions": {
    // 其他配置项...
    "lib": ["ESNext", "DOM"]
  }
}

若仍未解决，可手动添加类型声明文件（如src/globals.d.ts）：

declare interface Window {
  CompressionStream: typeof CompressionStream;
  DecompressionStream: typeof DecompressionStream;
}

验证 #

修改完成后重新编译项目，no-undef错误应会消失。同时建议保留运行时兼容性判断（如if ('CompressionStream' in window)），避免在不支持该API的浏览器中抛出异常。

内容的提问来源于stack exchange，提问作者Eric Owhadi