Gatsby: Toggle classes (navbar burger menu [show, hide]) | works in 'develop' but not in 'build'

[sunfudge]

In the Navbar.js component I want to be able to set state to true or false of the is-active css class, so that when the user presses the burger menu button, the menu _shows_ or _hides_.

The code below works in the gatsby develop but not in the gatsby build.

There are not errors in 'build'.

Question: Why the code below does not work in gatsby build?

import React from 'react';
import Link from 'gatsby-link';

import logo from '../img/logo.svg';

class Navbar extends React.Component {

  state = { showMenu: false }

  toggleMenu = () => {
    this.setState({
      showMenu: !this.state.showMenu
    })
  }

  render() {
    const menuActive = this.state.showMenu ? 'is-active' : '';
    const burgerActive = this.state.showMenu ? 'is-active' : '';
      return (     
  <nav className="navbar">
  <div className="navbar-brand">
    <Link className="navbar-item" to="/">
      <img src={logo} style={{ width: '88px' }} itemprop="image" alt="" />
    </Link>
    <div className={`navbar-burger burger ${burgerActive}`} onClick={this.toggleMenu}>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div className={`navbar-menu ${menuActive}`} >
    <div className="navbar-start">
      <Link className="navbar-link" to="/" onClick={this.toggleMenu}>
        Home
      </Link>
      <Link className="navbar-link" to="/services" onClick={this.toggleMenu}>
        Services
      </Link>
      <Link className="navbar-link" to="/contact" onClick={this.toggleMenu}>
        Contact
      </Link>
    </div>
  </div>
</nav>)
  }
};

export default Navbar;

[calcsam]

This doesn't seem to be a bug with Gatsby, and you would need to post the error message. Please ask on StackOverflow

[OrhanTozan]

@calcsam Something working in a development environment, but not in a production build, looks like a Gatsby issue to me... also @sunfudge said there was NO error message, yet you ask him to post it.

Looks like a badly reviewed issue.

[diegolamanno]

@sunfudge @calcsam I tried the code in my project and it worked. I am not sure why isn't working on your end.

Sometimes when Gatsby has issues in build and not develop is related to packages expecting window to be defined, which causes node to crash but that's not the case for this one. 😕