WebpackError: ReferenceError: window is not defined – npm run build

I get the following error when i do “npm run build” :

WebpackError: ReferenceError: window is not defined

this is a part of code that causes an error:

    params.slidesPerView =  Math.floor(window.innerWidth/400);
    // params.slidesPerGroup = Math.floor(window.innerWidth/400);
    console.log("Calc Width");
    console.log(window.innerWidth/400);
    this.lastWidth = params.slidesPerView;

Answer

During your development, you can access to window in client. When you run build, gatsby renders these components on the server where window is not defined.

Solution is the use window in componentDidMount or check window before you want use it.