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

Question

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

一般来说，对于我们自己的包，我们import { window } from '../utils/globals'如果使用window功能，但我们没有能力编辑这个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 {
    // ...
}

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