Create React App中Mapbox-GL与Opus-Recorder的Worker冲突问题求助

问题根源 #

• Worker-loader冲突：同时用worker-loader加载mapbox和opus的Worker时，webpack的loader规则会互相覆盖或干扰，导致其中一个Worker无法正常初始化。
• SyntaxError: expected expression, got '<'：这个错误是因为你给encoderPath传的路径不对，浏览器请求到的是HTML文件（通常是404跳转的首页），而非合法的JS Worker脚本，所以解析失败。

解决步骤 #

1. 弃用worker-loader，用CRA原生Web Worker支持 #

CRA v4+已经原生支持Web Worker，不需要额外配置worker-loader，直接用官方推荐的方式处理：

• mapbox-gl不需要手动加载Worker，库会自动处理：

  import mapboxgl from 'mapbox-gl';
  // 正常初始化mapbox即可，无需手动配置Worker
  

2. 正确配置opus-recorder的Encoder Worker #

方案一：静态文件直接引用（最简单）

1. 找到node_modules/opus-recorder/dist/encoderWorker.min.js，复制到项目的public文件夹下。
2. 代码中直接用根路径指向这个文件：

   const options = {
       mimeType: 'audio/ogg; codecs=opus',
       audioBitsPerSecond: 64000,
   };
   
   const workerOptions = {
       encoderPath: '/encoderWorker.min.js' // 直接指向public目录下的文件
   };
   
   const recorder = new MediaRecorder(stream, options, workerOptions);
   

方案二：动态生成Worker URL（推荐，无需手动复制文件）

1. 直接导入opus-recorder的Worker脚本，然后转成Blob URL：

   import encoderWorkerScript from 'opus-recorder/dist/encoderWorker.min.js';
   
   const options = {
       mimeType: 'audio/ogg; codecs=opus',
       audioBitsPerSecond: 64000,
   };
   
   // 把脚本转成Blob URL，避免路径问题
   const encoderWorkerUrl = URL.createObjectURL(
       new Blob([encoderWorkerScript], { type: 'application/javascript' })
   );
   
   const workerOptions = {
       encoderPath: encoderWorkerUrl
   };
   
   const recorder = new MediaRecorder(stream, options, workerOptions);
   
   // 组件卸载时记得释放URL，防止内存泄漏
   useEffect(() => {
       return () => URL.revokeObjectURL(encoderWorkerUrl);
   }, [encoderWorkerUrl]);
   

3. 验证修复 #

启动项目后，检查浏览器控制台：

• 确认mapbox地图正常加载，无Worker相关报错
• 确认opus-recorder的encoderWorker.min.js请求返回200，且内容是JS脚本而非HTML

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