Use of window object in my component causing error after working at first

[martinpsz]

I am trying to use a window event to add a background to my nav on scroll. At first, it worked. Now, I am not able to build and getting the following error in the console:

"Uncaught TypeError: doc.documentElement.doScroll is not a function at ready.js: 19 at ready.js: 7 at Object../node_modules/@mikaelkristiansson/domready.ready.js..."

I have tried, as some have suggested in regards to using window objects in Gatsby, to move my scroll function arguments to the ComponentDidMount lifecycle method. That has not fixed the issue. I have seen that there is an issue in using the window object in SSGs like Gatsby but I am not understanding how to work around this issue.

This is the relevant parts of my code on this:

    componentDidMount(){
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount(){
        window.removeEventListener('scroll', this.handleScroll);

    }

   handleScroll = () => {
        let position = window.scrollY;
        this.setState({scrolled: position})
    }

and the JSX code which uses the scrolled value in state to apply the background:

    <StyledNavbar style={this.state.showMenu || this.state.scrolled > 0 ? 
    {'background':'var(--Black)', 'opacity': '0.85', 'transition': '0.5s ease- 
    in-out'}: {'background': 'transparent'}} >

I should note that I am only seeing this issue in Chrome when I have dev tools open refreshing the page. This is even happening in incognito mode. I am not seeing the same issue in Firefox. Both browsers are at the latest version.

[freiksenet]

Hi @martinpsz!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

[johnywojtek]

Hello. I had the same issue with using window and trying to run gatsby build. Quick fix use windowGlobal variable that's checks if window is available :) then use it whenever you need to refer to window object :)

`
import React, { Component } from 'react';
import classnames from 'classnames';
import './nav.css';
import logo from '../../img/logo-white.png';
import { Link } from 'react-scroll';

const windowGlobal = typeof window !== 'undefined' && window;

class Nav extends Component {
constructor(props) {
super(props);

    this.state = {
        prevScrollpos: windowGlobal.pageYOffset,
        visible: true,
        showLangMenu: false
    };
}

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

handleHover = () => {
    this.setState({ showLangMenu: true });
};

handleLeave = () => {
    this.setState({ showLangMenu: false });
};

handleScroll = () => {
    if (windowGlobal.pageYOffset > 100 && windowGlobal.pageYOffset < 3300) {
        const { prevScrollpos } = this.state;

        const currentScrollPos = window.pageYOffset;
        const visible = prevScrollpos > currentScrollPos;

        this.setState({
            prevScrollpos: currentScrollPos,
            visible
        });
    }
};

render() {
    return (
        <nav
            className={classnames('nav', {
                'navbar--hidden': !this.state.visible
            })}>
            <div className="section_container">
                <div className="nav_cont">
                    <div className="logo">
                        <img className="logo_icon" src={logo} alt="" />
                        <h2 className="logo_text">Attendo</h2>
                    </div>
                    <ul className="main_nav">
                        <Link
                            activeClass="navbar--hidden"
                            to="about"
                            smooth={true}
                            offset={40}
                            duration={500}>
                            O firmie
                        </Link>
                        <Link
                            activeClass="active"
                            to="services"
                            smooth={true}
                            offset={30}
                            duration={500}>
                            Usługi
                        </Link>
                        <Link
                            activeClass="active"
                            to="special"
                            smooth={true}
                            offset={20}
                            duration={500}>
                            Usługi specjalistyczne
                        </Link>

                        <Link
                            activeClass="active"
                            to="contact"
                            smooth={true}
                            offset={10}
                            duration={500}>
                            Kontakt
                        </Link>
                        <li>
                            <a href="/">Sklep</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}

}

export default Nav;
`

Link to the issue #309 :)

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community!