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