Question

我尝试使用React，React-router和bootstrap创建一个Electron应用程序。我的package.json中有以下内容

“引导程序”：“ ^ 4.1.1”
“ jquery”：“ ^ 3.3.1”
“ popper.js”：“ ^ 1.14.3”
“电子”：“ ^ 2.0.4”

无论我在何处或如何称呼3个节点模块，此消息都会持续存在，我得到以下错误。我正在使用bootstrap.js文件，因为它提供了更具体的消息。我试过直接从引导站点使用CDN文件，以产生相同的错误。此错误使我的下拉列表无法正常工作。

**Uncaught TypeError: Cannot read property 'fn' of undefined
at setTransitionEndSupport (bootstrap.js:122)
at bootstrap.js:200
at bootstrap.js:202
at bootstrap.js:9
at bootstrap.js:10**

下面是我的HTML和我的react navbar组件

export default class Navbar extends React.Component {

  /**
   * Render component (React component lifecycle method)
   */
  render() {
    //const { isMaximized } = this.state;
    return (
      <header >
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item active">
                <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
              </li>
              <li className="nav-item">
                <Link to="/iloDetails" className="nav-link" href="#">iLO Details </Link>
              </li>
              <li className="nav-item dropdown">
                <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Manage Servers</a>
                <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                  <Link to="/NewServer" className="dropdown-item">New Server<i aria-hidden="true" /></Link>
                  <Link to="/ManageIP" className="dropdown-item">IP Management<i aria-hidden="true" /></Link>
                  <Link to="/PowerActions" className="dropdown-item">Power Actions<i aria-hidden="true" /></Link>
                </div>
              </li>
            </ul>
          </div>
        </nav>
      </header>
    )
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Lab Manager</title>
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="./assets/css/custom.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>

    <!-- Deploy React here  -->
    <div id="app"></div>

  </body>
  <script src="../node_modules/jquery/dist/jquery.slim.min.js"></script>
  <script src="../node_modules/popper.js/dist//umd/popper.min.js" ></script> 
  <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" ></script>
  <script>
   require( "./build/renderer.js" );
  </script>
</html>

更新

因此，如果我更换

，就找到了一个解决方法\解决方法

<script src="../node_modules/jquery/dist/jquery.slim.min.js"></script>

使用

<script>window.$ = window.jQuery = require('../node_modules/jquery/dist/jquery.slim.min.js');</script>

然后我的代码有效，为什么会这样？这使我难住了大约5个小时。

Answer 1

那是因为您必须在bootstrap.min.css之前加载jquery.slim.min.js

电子应用程序中的Boostrap错误

更新

1 个答案: