时间戳

首页 > 解决方案 > 如何在 Next.js 中使用 webrtc-adapter npm 包

reactjs - 如何在 Next.js 中使用 webrtc-adapter npm 包

问题描述

我正在使用 Next.js 创建一个 React。我的 ES6 导入对于我创建的 .js 文件来说工作得很好，但是当我导入webrtc-adapter它时它在下一个失败，但在 react-app 中成功：

import {adapterFactory} from './adapter_factory.js';
       ^
SyntaxError: Unexpected token {

例如这里是复制的两个链接：

以下是简化的测试用例。只需导入webrtc-adapter并控制它。在 CRA 中工作，但不在 Next 中。

在我自己的文件中导入 ES6 效果很好，但不是外部包。有任何想法吗？

{
  "name": "webrtc-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.8.0-alpha.0",
    "react-dom": "^16.8.0-alpha.0",
    "webrtc-adapter": "^7.1.1"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

在 pages/index.js 中

import adapter from 'webrtc-adapter';
console.log(adapter);
export default () => <div>Welcome to next!</div>;

我什至尝试过：

import 'webrtc-adapter';

任何帮助，将不胜感激！

标签： reactjswebrtcnext.js

解决方案

由于 Next.JS 在服务器和客户端上编译，因此您无法确定您是否处于浏览器上下文中（窗口未定义）。

要经常解决此问题，您可以使用简单的检查，例如：

if (typeof window !== 'undefined') {
  var adapter = require('webrtc-adapter')
}

确保您在浏览器上下文中

推荐阅读