web-dev-qa-db-fra.com

Erreur `fenêtre non définie` dans Node.js

Je sais que window n'existe pas dans Node.js, mais j'utilise React et le même code sur le client et sur le serveur. Toute méthode que j’utilise pour vérifier si window existe existe en filet:

Uncaught ReferenceError: la fenêtre n'est pas définie

Comment éviter le fait que je ne peux pas faire window && window.scroll(0, 0)?

node.jsreactjswebpackwebpack-dev-server
13
Sawtaytoes

Sawtaytoes l'a eu. Je voudrais exécuter n'importe quel code que vous avez dans composantDidMount () et l'entourer de:

if (typeof(window) !== 'undefined') {
  // code here
}

Si l'objet window n'est toujours pas créé au moment où React restitue le composant, vous pouvez toujours exécuter votre code une fraction de seconde après le rendu du composant (et que l'objet window a bien été créé d'ici là) afin que l'utilisateur ne puisse pas faire la différence.

if (typeof(window) !== 'undefined') {
    var timer = setTimeout(function() {
        // code here
    }, 200);
}

Je déconseille de mettre state dans le setTimeout.

17
Jeff Diederiks

Cela réglera ce problème pour vous:

typeof(window) === 'undefined'

Même si une variable n'est pas définie, vous pouvez utiliser typeof() pour la vérifier.

4
Sawtaytoes

Ce type de code ne devrait même pas être exécuté sur le serveur, mais dans un hook componentDidMount ( voir doc ), qui est uniquement invoqué côté client. En effet, il n’a pas de sens de faire défiler le côté serveur de fenêtres.

Toutefois, si vous devez faire référence à la fenêtre dans une partie de votre code qui exécute réellement le client et le serveur, utilisez plutôt global (qui représente la portée globale, par exemple window sur le client).

2
topheman
<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>

si vous avez besoin d'ouvrir une nouvelle page en haut dans l'application React JS, utilisez ce code dans router.js

0
Andrei Fyodorov

C’est un peu plus ancien, mais pour les classes de composants réactives de style ES6, vous pouvez utiliser ce décorateur de classe que j’ai créé en tant que solution ouverte pour la définition de composants qui ne doivent être rendus que du côté client. J'aime mieux que de laisser tomber des vérifications de fenêtre partout.

import { clientOnly } from 'client-component';

@clientOnly
class ComponentThatAccessesWindowThatIsNotSafeForServerRendering extends Component {
    render() {
        const currentLocation = window.location;
        return (
            <div>{currentLocation}</div>
        )
    };
}

https://github.com/peterlazzarino/client-component

0
Peter Lazzarino