WebPACKのレンダリング：

Question

私は使用 "ウィンドウが定義されていません" MERN - https://github.com/Hashnode/mern-starter（反応Reduxの、WebPACKの、nodejs、発現） と部品反応音 - https://github.com/leoasis/react-sound

Iが含ま成分

import Sound from 'react-sound'; 

とサーバーを起動しようとすると、私は"window is not defined" webpackサーバーレンダリングからエラーがあります。

私はこの行にコメントしてサーバーを起動しても問題ありません。その後、サーバーの実行中に変更がサーバーのレンダリング（フロントレンダリングのみ）をトリガーしないため、この行のコメントを解除してコンポーネントが機能するようになります。

私は（WebPACKの後）フロントレンダリングにReferenceError: Sound is not definedエラーが発生している

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

そして

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

をレンダリングにしてみてください。

UPDATE：私は（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> 
) 
}