You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

引入react-media-recorder后WebPack编译报错求助

安装react-media-recorder后Webpack解析失败问题

我在npm安装react-media-recorder库后,运行React 16.14.2项目时遭遇Webpack报错。

报错信息

ERROR in ./node_modules/rxjs-interop/dist/esm/to-observer.js 11:42
Module parse failed: Unexpected token (11:42)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
|         }
|         return {
>             complete: (observer.complete ?? noop).bind(observer),
|             error: (observer.error ?? rethrow).bind(observer),
|             next: (observer.next ?? noop).bind(observer),
 @ ./node_modules/rxjs-interop/dist/esm/index.js 3:0-30 3:0-30
 @ ./node_modules/subscribable-things/build/es2019/module.js
 @ ./node_modules/extendable-media-recorder/build/es2019/factories/webm-pcm-media-recorder.js
 @ ./node_modules/extendable-media-recorder/build/es2019/module.js
 @ ./node_modules/react-media-recorder/lib/index.js
 @ ./node_modules/react-media-recorder/index.js
 @ ./src/tools/ScreenRecording.tsx
 @ ./src/menu/DrawersWrapper.tsx
 @ ./src/views/VideoEditor.tsx
 @ ./src/views/AuthRouter.tsx
 @ ./src/index.tsx
 @ ./src/entrypoints/web/main.ts

库的使用代码

import { useReactMediaRecorder } from "react-media-recorder";

const RecordView = () => {
  const { status, startRecording, stopRecording, mediaBlobUrl } = useReactMediaRecorder({ video: true });

  return (
    <div>
      <p>{status}</p>
      <button onClick={startRecording}>Start Recording</button>
      <button onClick={stopRecording}>Stop Recording</button>
      <video src={mediaBlobUrl} controls autoPlay loop />
    </div>
  );
};

Webpack配置片段

rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            plugins: [
              (isDevelopment && isUsingDevServer)
                ? require.resolve('react-refresh/babel')
                : null,
            ].filter(Boolean),
          },
        },

请问有人遇到过类似问题吗?或者知道问题出在哪里?


内容的提问来源于stack exchange,提问作者szlapek

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 00:13:30