Решить проблему Hammer.JS в проекте SSR

Рендеринг на стороне сервера, как всегда, тормозит ваши зависимости ...

Если вы пытаетесь использовать Hammer.JS в своем проекте рендеринга на стороне сервера (SSR), как в старые времена, вы получите сообщение об ошибке: ReferenceError: window is not defined. Тем временем вы, вероятно, подумаете: «О! Решить легко. Просто переместите всю логику, связанную с жестами, после первого рендеринга! ». Затем обнаружите, что снова получили это душераздирающее сообщение. Давайте найдем, как разрешить это надоедливое сообщение.

Отслеживая исходный код HammerJS, вы обнаружите, как он экспортируется.

(function(window, document, exportName, undefined) {
  /* ... */
})(window, document, 'Hammer');

Таким образом, ошибка возникает в самой первой строке.

import Hammer from 'hammerjs';

Поскольку нам действительно не нужны какие-либо события касания во время процесса рендеринга на стороне сервера, нам могут потребоваться некоторые уловки, такие как динамический импорт. Однако он все еще находится на стадии предложения, поэтому он еще не готов. Но не переживайте, этот пакет Webpack, bundle-loader сделает то же самое за нас.

Просто введите следующие строки в конфигурацию Webpack на стороне сервера.

{
  test: /hammerjs/,
  loader: "bundle-loader",
  options: {
    lazy: true
  }
},

Теперь ваше приложение будет импортировать HammerJS только тогда, когда оно действительно вызывает связанные функции. Ставим логику жестов после componentDidMount вот так.

componentDidMount() {
  initGesture();
}

Нам даже не нужно изменять какой-либо другой код.