Возникли проблемы при использовании response-moveable с NEXT js: TypeError: Невозможно прочитать свойство 'userAgent' из неопределенного

Question

Я пытался решить эту проблему в течение последних нескольких часов. Я могу использовать легко реагирующий с простым node.js приложением. Когда я пытаюсь использовать тот же модуль внутри приложения NEXT js, он выдает ошибку: TypeError: Cannot read property 'userAgent' of undefined

Вот реплицированная проблема: https://codesandbox.io/s/hungry-ramanujan-ttqh3?fontsize=14&hidenavigation=1&theme=dark

Насколько я могу судить, похоже, что я пытаюсь сделать что-то на стороне сервера, что должно быть на стороне клиента. Не уверен, что решение, хотя ...

Спасибо за вашу помощь!

Answer 1

Проблема здесь в том, что модуль не готов к SSR, и он пытается прочитать navigator.userAgent

Вы можете попробовать переместить вашу логику c в другой компонент и использовать next / dynamici c динамически импортировать его, установив ssr в false:

import dynamic from 'next/dynamic';

// ...
// other stuff, imports, etc
// ...

const MoveableNoSSR = dynamic(() => import('./MoveableWrapper'), {
  ssr: false,
  loading: () => <div>Loading Moveable...</div>,
});