如何使用Next.js + Babel来填充或模拟全局（窗口）导航器？

Question

我们正在使用第三方的node_module ，它期望找到节点的服务器端渲染环境中不存在的全局navigator.useragent 。

通常，对于我们自己的包，如果使用window功能，我们import { window } from '../utils/globals' ，但我们无法编辑此node_module 。

我不确定如何为这个特定的包（或所有包）自动提供window.navigator ，它看起来不像我们使用的是Webpack，而是使用yarn / next / babel。

如何在编译/转换过程中创建全局变量？

Answer 1

解决方案是在_app.jsx类定义之前创建全局/上下文变量。

import App, { Container } from 'next/app';
if (typeof global.navigator === 'undefined') global.navigator = {};
// const navigator = {};

class MyApp extends App {
    // ...
}

我尝试在导入有问题的软件包的地方添加它，但这不起作用。 不确定服务器端/客户端渲染切换的细节，并且可能有更精确，定制的方式来处理这种情况。