WebpackError：未定义文档

Question

我无法弄清楚我在这里做错了什么/如何解决它。我正在使用gatsby.js和bulma构建一个站点。这是我第一次使用其中任何一个，当我尝试构建它时，我遇到了一个问题：

WebpackError: document is not defined

我使用document的唯一地方是使用bulma docs中提供的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

任何关于如何解决这个问题的想法都非常感谢。谢谢

Answer 1

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

document本身就是客户端，因为它代表了客户的文档。但是，Gatsby呈现您的站点服务器端（当您运行gatsby build时）。

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

你的一些代码引用了“浏览器全局”，如window或document。如果这是您的问题，您应该看到上面的错误，如“窗口未定义”。

盖茨比建议两种解决方案：

要解决此问题，请找到有问题的代码

1. 如果定义了窗口，则在调用代码之前进行检查，以便在Gatsby构建时代码不会运行（请参阅下面的代码示例）或
2. 如果代码在React.js组件的render函数中，则将该代码移动到componentDidMount中，以确保代码不会运行，除非它在浏览器中。