electronjs $(...).modal 不是函数

Question

所以在尝试调试大约 2 小时后。仍然没有解决方案，我在这里寻求帮助。我在 electronjs 中创建了一个简单的聊天应用程序，我在那里使用了 bootstrap 模式。发生错误：

chat.js:214 Uncaught TypeError: $(...).modal is not a function

我查看了关于 SO、github 和 google 提供的其他结果的几个答案，但 none 似乎有效。然后我遇到了 npm i @popper/core，我认为这可能会有所帮助，因为模态也是一种弹出窗口......但这也没有帮助。

在 electronjs 中，我有单页 homepage.html 和 script.js 以及 css。然而，在项目开始时（现在我太过分了）我在通过 CDN 包含 .js 脚本时遇到了麻烦（也试图解决但不能）所以我 npm i 它们和存储在本地。但是，从 html 文件的末尾 <script src="../src/jquery.min.js"></script> 调用它们显示“错误：找不到文件”，所以在 script.js 本身，我写了 const $=require('jquery') 和其他类似的，和那行得通。我一直继续，今天我得到了这个 modal 错误。虽然 css 个文件来自 CDN 并保存在 head 标签中。

（所有其他早期实现的功能都可以正常工作，但这个最新的模态功能不是）

完成任何类型的 require(...) 或 script<> 或 link<> 的文件结构是：

导致代码错误

  socket.on("valid-user-credentials", (user) => {
    console.log("user-found: ", user);
    $("#modal-find-user-account").modal("hide");  // <---- here is ERROR
    // other code
  });

Homepage.html

<head>
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'unsafe-inline' 'self' http://localhost:3000/"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
      integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="../styles/homepage_styles.css" />
</head>
<body>
    <!-- other elements -->

    <script src="./script.js"></script>
</body>

script.js

// in the very begining of file:

const $ = require("jquery");
require("@popperjs/core");
require("jquery-validation");
require("bootstrap");
require("bootstrap/js/dist/modal");
require("dotenv").config();
const { ipcRenderer } = require("electron");

// other code

请告知我是否遗漏或订购了任何特定包裹或其他东西：/

PS：请注意，我已经阅读了很多关于 google 的相关问题和答案，但无法包含所有链接，因为它们太多了。尽管参与度最高的是：

https://github.com/JeffreyWay/laravel-mix/issues/1444

https://github.com/ColorlibHQ/AdminLTE/issues/994

Answer 1

终于......在阅读了几篇文章后，我发现了一行对我来说很神奇，挽救了我的一天。如果有人因为 jQuery 的某些问题而感到麻烦，说某些内容未定义，尽管你知道它是，请确保在脚本文件的最开头包含此行 window.$ = window.jQuery = $;。

在我的案例中，这是唯一造成麻烦的线路。（使用 CDN 或本地 dist 或 popper.js 实际上对我的问题来说并不重要）

electronjs $(...).modal 不是函数

electronjs $(...).modal is not a function

javascript

jquery

npm

bootstrap-modal

electron