Визуализация веб-пакета: "окно не определено"

Question

Я использую MERN - https://github.com/Hashnode/mern-starter (реагировать, редукс, веб-пакет, nodejs, экспресс) и компонентный звук реакции - https://github.com/leoasis/react-sound

Когда я включаю компонент

import Sound from 'react-sound';

и попробуйте запустить сервер, у меня есть "window is not defined" ошибка при рендеринге сервера webpack.

Но если я прокомментирую эту строку и запустлю сервер, все будет хорошо. После этого я могу раскомментировать эту строку, и компонент будет работать, потому что, когда сервер работает, изменения не вызывают рендеринг сервера (только фронтальный рендеринг).

Если я попробую

if (typeof window !== 'undefined') {
    const Sound = require('react-sound');
}

И в рендер

render() {
    return (
        <div>
            <Sound playStatus={Sound.status.STOPPED} url="" />
        </div>
    );
}

я имею ReferenceError: Sound is not defined ошибка при рендеринге фронта (после webpack).

ОБНОВИТЬ:

Если я попробую (varне const)

if (typeof window !== 'undefined') {
    var Sound = require('react-sound');
}

я имею TypeError: Cannot read property 'status' of undefined ошибка при фронтальном рендеринге.

Answer 1

Кажется, что вы не можете использовать реагирующий звук вне среды браузера.

Решение может быть следующим:

let SoundEl;
if (typeof window !== 'undefined') {
  import Sound from 'react-sound';
  SoundEl = <Sound playStatus={Sound.status.STOPPED} url="" />
} else {
  SoundEl = <div></div>
}

...

render() {
  return (
    <div>
      {SoundEl}
    </div>
  )
}