Webpack rendu: "la fenêtre est pas définie"

Question

J'utilise MERN - https://github.com/Hashnode/mern-starter (réagir, redux, webpack, nodejs, exprimer) et composants réagissent-son - https://github.com/leoasis/react-sound

Lorsque j'inclus le composant

import Sound from 'react-sound'; 

et essayez de démarrer le serveur, j'ai "window is not defined" erreur de rendu serveur webpack. Mais si je commente cette ligne et démarre le serveur, tout ira bien. Après cela, je peux décommenter cette ligne et le composant fonctionnera, car lorsque le serveur est en cours d'exécution, les changements ne déclenchent pas le rendu du serveur (seulement le rendu frontal).

Si je tente

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

Et rendre

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

Je ReferenceError: Sound is not defined erreur sur le rendu avant (après webpack).

MISE À JOUR:

Si j'essayer (var, non const)

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

Je TypeError: Cannot read property 'status' of undefined erreur sur le rendu avant.

Answer 1

Semble que vous ne pouvez pas utiliser le son de réaction en dehors d'un environnement de navigateur.

La solution peut être la suivante:

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> 
) 
}