Gatsby 빌드가 Bootstrap bundle.min.js에서 오류를 반환합니다.

내 Gatsby 앱을 빌드하려고했는데 다음 오류가 반환되었습니다.

정적 HTML 빌드 실패

이 오류에 대한 자세한 정보는 문서 페이지를 참조하십시오 : https://gatsby.dev/debug-html

 WebpackError: ReferenceError: Element is not defined

  - bootstrap.bundle.min.js:6 
    node_modules/bootstrap/dist/js/bootstrap.bundle.min.js:6:3033

  - bootstrap.bundle.min.js:6 
    node_modules/bootstrap/dist/js/bootstrap.bundle.min.js:6:68

  - bootstrap.bundle.min.js:6 
    node_modules/bootstrap/dist/js/bootstrap.bundle.min.js:6:162

  - Layout.js:1 
    src/components/Layout.js:1:1

  - 404.js:1 
    src/pages/404.js:1:1

npm을 통해 부트 스트랩을 설치하고 Layout구성 요소 에 포함했습니다 .

import React, { useEffect } from "react"
import "bootstrap/dist/js/bootstrap.bundle.min.js"
import "bootstrap/dist/css/bootstrap.min.css"
import "../assets/css/style.css"
import "../assets/css/aos.css"
import Navbar from '../components/Navbar'
import Footer from '../components/Footer'

기록을 위해 내 앱은 gatbsy 개발에서 완전히 잘 작동합니다. 또한 터미널에 다음과 같은 이상한 부트 스트랩 코드가 표시됩니다.

이 문제의 원인은 확실하지 않지만 부트 스트랩이 내 앱에서 완전히 잘 작동하고 있음을 보장합니다.

이 문제를 어떻게 해결합니까?

업데이트 : WebpackError: ReferenceError: Element is not defined내 개츠비 브라우저에 ff를 추가 하여 문제 를 해결 합니다.

import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.bundle.min.js"

하지만 새로운 오류가 발생했습니다 (전체 로그).

Building static HTML failed for path "/blogs/react-js-why"

See our docs page for more info on this error: https://gatsby.dev/debug-html


   6 |     }
   7 |     if (isProduction) {
>  8 |         throw new Error(prefix);
     | ^
   9 |     }
  10 |     throw new Error(prefix + ": " + (message || ''));
  11 | }


  WebpackError: Invariant failed

  - tiny-invariant.esm.js:8
    node_modules/tiny-invariant/dist/tiny-invariant.esm.js:8:1

  - history.js:250
  - history.js:250
    node_modules/history/esm/history.js:250:115

  - react-router-dom.js:29
    node_modules/react-router-dom/esm/react-router-dom.js:29:41

After making some research, the results are pointing on the use of react-router-dom in Gatsby. Not sure if its the issue but I use it on my PageLinks component:

import React from "react"
import { BrowserRouter as Router, Switch } from "react-router-dom"
import { HashLink } from 'react-router-hash-link'
import Scrollspy from 'react-scrollspy'

const data = [
  {
    id: 1,
    text: "Home",
    div: "home",
    url: "#home"
  },
  {
    id: 2,
    text: "About",
    div: "about",
    url: "#about"
  },
  {
  {
    id: 3,
    text: "Blogs",
    div: "blogs",
    url: "#blogs",
  },
  {
    id: 4,
    text: "Contact",
    div: "contact",
    url: "#contact"
  },
]

let divs = data.map(x => x.div)

export default () => {
  return (
    <Router>
      <Switch>
      <Scrollspy className="navbar-nav ml-auto" items={ divs } currentClassName="active">
            {  data.map(link => {
                return (
                        <li className="nav-item" key={link.id}>
                          <HashLink smooth to={link.url} className="nav-link text-uppercase font-weight-bold">{link.text}</HashLink>
                        </li>
                    )
              })
          }
      </Scrollspy>
      </Switch>
    </Router>
  )
}