javascript - WebpackError:文档未定义

我在弄清楚我在做什么错/如何解决它时遇到了麻烦。我正在使用gatsby.js和bulma构建网站。这是我第一次使用它，尝试构建它时出现问题：

WebpackError: document is not defined

我唯一使用document的地方是bulma文档中提供的navbar-burger切换代码。一切在开发中都可以正常工作，但是在进行生产时会中断。这是我的代码：

import React from 'react'
import Link from 'gatsby-link'
import Logo from '../img/logo.png'

const Navbar = ({ siteTitle }) => (
  <div>
    <nav className="navbar is-primary is-fixed-top">
        <div className="container is-fluid">
            <div className="navbar-brand">
                <a className="navbar-item" href="../">
                    <img src={Logo} alt="Logo"/>
                </a>
                <a role="button" className="navbar-burger has-text-white" data-target="navMenu" aria-label="menu" aria-expanded="false">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>
            <div className="navbar-menu" id="navMenu">
                <div className="navbar-start has-text-white">
                      <a className="navbar-item">
                        Overview
                      </a>
                      <a className="navbar-item">
                        Overview
                      </a>
                      <a className="navbar-item">
                        Overview
                      </a>
                      <a className="navbar-item">
                        Overview
                      </a>

                </div>
                <div className="navbar-end has-text-white">

                      <a className="has-text-white navbar-item">
                        Overview
                      </a>
                      <div className="navbar-item">
                      <a className="button is-success is-fullwidth">
                        Request Demo
                      </a>
                      </div>
                </div>
            </div>
        </div>
    </nav>

  </div>

);

document.addEventListener('DOMContentLoaded', () => {

        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

        // Check if there are any navbar burgers
        if ($navbarBurgers.length > 0) {

            // Add a click event on each of them
            $navbarBurgers.forEach(el => {
                el.addEventListener('click', () => {

                    // Get the target from the "data-target" attribute
                    const target = el.dataset.target;
                    const $target = document.getElementById(target);

                    // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
                    el.classList.toggle('is-active');
                    $target.classList.toggle('is-active');

                });
            });
        }

    });

export default Navbar

非常感谢您对如何解决此问题的任何想法。
谢谢

最佳答案

这是客户端/服务器端的问题。

document本质上是客户端，因为它表示客户端的文档。但是，Gatsby将在服务器端呈现站点（运行gatsby build时）。

document将在构建时未定义，并触发错误（请参见文档页面Debugging HTML builds）：


  您的某些代码引用了“浏览器全局变量”，例如window或document。如果这是您的问题，则应该在上面看到类似“未定义窗口”的错误。


盖茨比提出了两种解决方案：


  要解决此问题，请找到有问题的代码，然后选择
  
  
  如果定义了窗口，则在调用代码之前进行检查，以便在构建盖茨比时无法运行代码（请参见下面的代码示例），或者
  如果代码位于React.js组件的render函数中，则将该代码移至componentDidMount，以确保该代码除非在浏览器中才能运行。