Как заполнить или смоделировать глобальный (оконный) навигатор, используя 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 {
    // ...
}

Я попытался добавить его, когда мы импортируем пакет с ошибками, но это не сработало. Не уверен в специфике передачи обслуживания при рендеринге на стороне сервера / на стороне клиента, и, вероятно, есть более изощренный, адаптированный способ справиться с ситуацией.