切换类（navbar汉堡菜单[show，hide]）|适用于“开发”但不适用于“构建”

Question

在Navbar.js组件中，我希望能够将is-active css类的state设置为true或false，这样当用户按下汉堡菜单按钮时，菜单会显示或隐藏。

以下代码适用于gatsby开发，但不适用于gatsby版本。

'build'中没有错误。

问题：为什么下面的代码在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;