使用react-webcam遇TypeError：Object prototype may only be an Object or null: undefined

问题重现 #

在非Angular项目中引入react-webcam组件后，页面加载触发服务器端错误：

Server Error
TypeError: Object prototype may only be an Object or null: undefined

调用栈指向react-webcam/dist/react-webcam.js中的extendStatics、__extends方法，说明错误发生在服务器端渲染（SSR）过程中，组件尝试访问浏览器环境独有的API或存在模块兼容性问题。

解决方案 #

以下是针对该问题的有效修复方案，按优先级排序：

1. 动态导入组件并禁用SSR

react-webcam依赖浏览器的navigator.mediaDevices等API，无法在服务器端运行。使用框架提供的动态导入功能，强制组件仅在客户端渲染：
以Next.js为例：

import dynamic from 'next/dynamic';

// 禁用SSR，仅在客户端加载组件
const Webcam = dynamic(() => import('react-webcam'), {
  ssr: false,
  loading: () => <div>摄像头组件加载中...</div>
});

其他SSR框架（如Gatsby）可使用类似的动态导入逻辑，确保组件不在服务器端执行。

2. 降级到兼容版本

部分新版本react-webcam可能与你的React/SSR框架版本存在兼容性问题，尝试降级到稳定版本：

npm uninstall react-webcam
npm install react-webcam@7.2.0

（7.x系列版本对SSR场景的兼容性更好）

3. 手动封装组件，添加环境判断

如果动态导入仍无效，手动封装一层组件，仅在浏览器环境加载react-webcam：

import React from 'react';

let WebcamComponent;
// 仅在浏览器环境加载组件
if (typeof window !== 'undefined') {
  WebcamComponent = require('react-webcam').default;
}

const Webcam = (props) => {
  // 服务器端返回null，避免执行不兼容代码
  if (!WebcamComponent) return null;
  return <WebcamComponent {...props} />;
};

export default Webcam;

4. 自定义Webpack配置调整（适用于自定义SSR项目）

如果是自行配置Webpack的SSR项目，将react-webcam标记为服务器端外部依赖，避免编译时执行：
在服务器端Webpack配置文件中添加：

module.exports = {
  // ...其他配置
  externals: {
    'react-webcam': 'commonjs react-webcam'
  }
};

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