Webpack Rendering: "Fenster ist nicht definiert"

Question

I MERN verwenden - https://github.com/Hashnode/mern-starter (reagieren, redux, webpack, NodeJS, exprimieren) Und Komponente reagieren-Sound - https://github.com/leoasis/react-sound

Wenn ich Komponente

import Sound from 'react-sound'; 

umfassen

und versuchen Sie den Server zu starten, ich habe "window is not defined" Fehler von Webpack Server Rendering.

Aber wenn ich diese Zeile kommentieren und den Server starten, wird alles in Ordnung sein. Danach kann ich diese Zeile auskommentieren und die Komponente wird funktionieren, denn wenn der Server läuft, lösen Änderungen nicht das Server-Rendering aus (nur Front-Rendering).

Wenn ich versuche,

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

Und machen

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

Ich habe ReferenceError: Sound is not defined Fehler auf der Vorderseite Rendering (nach webpack).

UPDATE:

Wenn ich versuche, (var, nicht const)

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

Ich habe TypeError: Cannot read property 'status' of undefined Fehler auf Front-Rendering.

Answer 1

Scheint, dass Sie nicht außerhalb einer Browser-Umgebung reagieren können.

Die Lösung kann wie folgt sein:

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