Question

我在弄清楚我在做什么错/如何解决问题上遇到了麻烦。我正在使用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

任何有关如何解决此问题的想法都将受到赞赏。谢谢

Answer 1

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

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

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

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

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

要解决此问题，请找到有问题的代码，然后选择


在调用代码之前检查是否定义了窗口，以便在构建盖茨比时代码不会运行（请参见下面的代码示例），或者

如果代码位于React.js组件的呈现函数中，请将其移至componentDidMount中，以确保该代码除非在浏览器中才能运行。

WebpackError：文档未定义

1 个答案: