类型错误：使用流浏览器时，类扩展值未定义不是构造函数或 null

Question

使用 stream-browserify 导入 Transform 类并在代码中扩展它时，导致浏览器控制台中出现以下异常

AudioUtils.ts:52 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at Module../src/components/AudioUtils.ts (AudioUtils.ts:52:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/components/TController.ts (TConfig.ts:10:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Module../src/components/STT.tsx (AudioUtils.ts:67:1)
    at Module.options.factory (react refresh:6:1)

这是 AudioUtils.ts 的片段code>

import { Transform } from 'stream'

export class EncodePcmStream extends Transform {
    _transform(chunk: any, encoding: string, callback: TransformCallback) {
        const buffer = encodePcm(chunk); // encodePcm is a local function
        this.push(buffer);
        callback();
    }
}

这是 package.json 的片段，

{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/jest": "^27.4.1",
    "@types/node": "^16.11.26",
    "@types/react-dom": "^17.0.2",
    "buffer": "^6.0.3",
    "microphone-stream": "^6.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "stream-browserify": "^3.0.0",
    "typescript": "^4.6.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "devDependencies": {
    "@types/readable-stream": "2.3.13"
  },
  "type": "module"
}

• 我在这里检查了大多数具有类似错误的问题，但没有一个解决方案有效。
• 我使用 dpdm 来检查循环依赖关系，并且没有报告循环依赖关系。