ReactJS中Uncaught ReferenceError: worker is not defined错误求助

出现Uncaught ReferenceError: worker is not defined错误，是因为你使用的react-media-recorder库内部依赖的Web Worker未被正确加载或打包。该库在处理音频录制逻辑时会用到Web Worker，但你的项目构建环境（如Webpack、Vite）没有正确处理Worker文件的打包流程，或者库的版本存在兼容性问题。

针对这个问题，你可以尝试以下几种解决方法：

• 降级库版本：部分新版本的react-media-recorder在Worker打包逻辑上存在兼容性问题，你可以降级到稳定版本，执行以下命令：

  npm install react-media-recorder@1.6.6
  

  这个版本的Worker加载逻辑更稳定，适配大多数项目构建工具。

• 配置构建工具处理Worker：

  • 如果你用Webpack，需要在webpack.config.js中添加Worker-loader的配置，确保Worker文件能被正确打包：

    module.exports = {
      module: {
        rules: [
          {
            test: /\.worker\.js$/,
            use: { loader: 'worker-loader' }
          }
        ]
      }
    };
    

  • 如果你用Vite，它默认支持Web Worker，但如果仍有问题，可以检查库的Worker路径是否正确，或者手动指定Worker的导入方式。

• 改用原生API实现：如果不想折腾第三方库的兼容性，直接使用浏览器原生的MediaRecorder API实现音频录制，示例代码如下：

  import React, { useState, useRef } from "react";
  
  export default function RecordView() {
    const [status, setStatus] = useState("Idle");
    const [mediaBlobUrl, setMediaBlobUrl] = useState("");
    const mediaRecorderRef = useRef<MediaRecorder | null>(null);
    const streamRef = useRef<MediaStream | null>(null);
  
    const startRecording = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        streamRef.current = stream;
        const mediaRecorder = new MediaRecorder(stream);
        const chunks: Blob[] = [];
  
        mediaRecorder.ondataavailable = (e) => chunks.push(e.data);
        mediaRecorder.onstop = () => {
          const blob = new Blob(chunks, { type: "audio/wav" });
          setMediaBlobUrl(URL.createObjectURL(blob));
        };
  
        mediaRecorder.start();
        mediaRecorderRef.current = mediaRecorder;
        setStatus("Recording...");
      } catch (err) {
        console.error(err);
        setStatus("Error starting recording");
      }
    };
  
    const stopRecording = () => {
      mediaRecorderRef.current?.stop();
      streamRef.current?.getTracks().forEach(track => track.stop());
      setStatus("Recording stopped");
    };
  
    return (
      <div>
        <p>{status}</p>
        <button onClick={startRecording}>Start Recording</button>
        <button onClick={stopRecording}>Stop Recording</button>
        {mediaBlobUrl && <audio src={mediaBlobUrl} controls autoPlay loop />}
      </div>
    );
  }
  

  原生API更可控，不会依赖第三方库的打包问题。

内容的提问来源于stack exchange，提问作者jhon estrada