javascript - 网页包错误 : document is not defined

Question

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

WebpackError: 文档未定义

我唯一使用 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

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

Answer 1

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

document 本质上是客户端，因为它代表客户端的文档。但是，Gatsby 会在服务器端呈现您的站点(当您运行 gatsby build 时)。

document 将在构建时未定义，并触发错误(参见文档页面 Debugging HTML builds):

Some of your code references “browser globals” like window or document. If this is your problem you should see an error above like “window is not defined”.

Gatsby 提出了两种解决方案:

To fix this, find the offending code and either

1. check before calling the code if window is defined so the code doesn’t run while Gatsby is building (see code sample below) or
2. if the code is in the render function of a React.js component, move that code into componentDidMount which ensures the code doesn’t run unless it’s in the browser.