Gatsby 构建在 Bootstrap bundle.min.js 上返回错误

Question

我尝试构建我的 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 develop 上运行良好。它还在终端上显示以下奇怪的引导代码：

我不确定是什么原因造成的，但我保证引导程序在我的应用上运行良好。

我该如何解决这个问题？

更新：我通过将 ff 添加到我的 gatsby 浏览器来解决问题 WebpackError: ReferenceError: Element is not defined：

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

经过一番研究，结果指向了react-router-dom在盖茨比中的使用。不确定是否是问题，但我在 PageLinks 组件上使用了它：

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>
  )
}

Answer 1

我认为您的问题来自Scrollspy 以及您在那里使用的混合路由。您正在使用 react-router-dom 而 Gatsby 从 @reach/router 扩展，因此您无需使用 Router 或 Switch 组件处理和过度杀伤您的项目，Gatsby 的链接 (<Link>) 为您完成所有工作。

通过调用onCreateWebpackConfig API 并添加null 加载程序，尝试忽略gatsby-node.js 中react-scrollspy 依赖项的转换。

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-scrollspy/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

您的项目正在开发中（gatsby develop），因为总而言之，它是处理代码编译的浏览器（显然有一个 window 和其他全局对象），当然，react-scrollspy 正在使用它窗口对象来制作他们的东西。但是，构建发生在there isn't a window or other global objects 的服务器端（节点）中，因此代码中断。通过这种自定义，基本上，您可以避免在服务器端转换有问题的模块，通过添加 null 加载程序来避免代码破坏。

可能会破坏您的代码的其他可能原因是路由的混合。