WebpackError: документ не определен

Question

У меня проблемы с выяснением, что я делаю не так здесь / как это исправить. Я строю сайт, используя gatsby.js и bulma. Я впервые использую любой из них, и у меня возникает проблема, когда я пытаюсь создать его, который гласит:

WebpackError: document is not defined

Единственное место, которое я использую document с кодом переключения navbar-burger, предоставленным в документах bulma. Все отлично работает в разработке, но ломается при сборке для производства. Это мой код:

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 build).

documentбудет неопределенным при сборке и вызовет ошибку (см. страницу документации Отладка сборок HTML):

Некоторые из ваших кодов ссылаются на "глобальные браузеры", например window или document. Если это ваша проблема, вы должны увидеть выше сообщение об ошибке, например "окно не определено".

Гэтсби предлагает два решения:

Чтобы исправить это, найдите проблемный код и либо

1. перед вызовом кода проверьте, определено ли окно, чтобы код не запускался во время сборки Gatsby (см. пример кода ниже) или
2. если код находится в функции рендеринга компонента React.js, переместите этот код в componentDidMount, который гарантирует, что код не запускается, если он не находится в браузере.