18

I know window doesn't exist in Node.js, but I'm using React and the same code on both client and server. Any method I use to check if window exists nets me:

Uncaught ReferenceError: window is not defined

How do I get around the fact that I can't do window && window.scroll(0, 0)?

Kevin Ghadyani
  • 6,829
  • 6
  • 44
  • 62

6 Answers6

23

Sawtaytoes has got it. I would run whatever code you have in componentDidMount() and surround it with:

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

If the window object is still not being created by the time React renders the component, you can always run your code a fraction of a second after the component renders (and the window object has definitely been created by then) so the user can't tell the difference.

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

I would advise against putting state in the setTimeout.

Jeff Diederiks
  • 1,315
  • 13
  • 20
6

This will settle that issue for you:

typeof(window) === 'undefined'

Even if a variable isn't defined, you can use typeof() to check for it.

Kevin Ghadyani
  • 6,829
  • 6
  • 44
  • 62
3

This kind of code shouldn't even be running on the server, it should be inside some componentDidMount (see doc) hook, which is only invoke client side. This is because it doesn't make sense to scroll the window server side.

However, if you have to reference to window in a part of your code that really runs both client and server, use global instead (which represents the global scope - e.g. window on the client).

topheman
  • 7,422
  • 4
  • 24
  • 33
  • In one instance, I needed to do `new Audio()`, and I need to check if `window` and `window.Audio` exists. Sadly, if I do it in componentDidMount(), it comes up as undefined in the props of the child module I put it in even if I do it `onClick`. – Kevin Ghadyani Feb 13 '16 at 02:44
1

This is a little older but for ES6 style react component classes you can use this class decorator I created as a drop in solution for defining components that should only render on the client side. I like it better than dropping window checks in everywhere.

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

Peter Lazzarino
  • 11
  • 1
0
<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>

if you need to open new page on top in React JS app, use this code in router.js

Andrei Fyodorov
  • 23
  • 7
  • 1
    Just dropping a piece of code is rarely helpful. Please add an explanation. – lexicore Jun 03 '17 at 22:16
  • While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Badacadabra Jun 04 '17 at 12:00
0

Move the window and related code to the mounted() lifecycle hook. This is because mounted() hook is called on the client side only and window is available there.

JustAnotherGirl
  • 311
  • 3
  • 5