WebpackError: документ не определен - PullRequest
Новая
       17

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

0 голосов
/ 31 августа 2018

У меня проблемы с выяснением, что я делаю здесь неправильно / как это исправить. Я строю сайт, используя 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

Любые мысли о том, как это исправить, приветствуются. Спасибо

1 Ответ

0 голосов
/ 22 апреля 2019

Это проблема на стороне клиента / на стороне сервера.

document изначально является клиентской частью, поскольку представляет документ клиента. Однако, Gatsby отображает ваш сайт на стороне сервера (когда вы запускаете gatsby build).

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

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

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

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

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