引入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
相关产品推荐
相关产品推荐

