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

Posted 2023-03-22

技术标签:

【中文标题】electronjs $(...).modal 不是函数【英文标题】：electronjs $(...).modal is not a function 【发布时间】：2021-08-05 15:25:34 【问题描述】：

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

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

我在 SO、github 和 google 提供的其他结果上查看了几个答案，但似乎没有一个有效。然后我遇到了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 上阅读了大量相关问题和答案，但无法包含所有这些问题的链接，因为它们很多。虽然其中一些参与度最高的是：

Bootstrap : TypeError: $(...).modal is not a function

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

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

【问题讨论】：

这能回答你的问题吗？ Electron: jQuery is not defined 【参考方案1】：

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

在我的情况下，这是唯一引起麻烦的行。（使用 CDN 或本地 dist 或 popper.js 实际上对我提出的问题无关紧要）

【讨论】：

以上是关于electronjs $(...).modal 不是函数的主要内容，如果未能解决你的问题，请参考以下文章

如何在 ElectronJS 中打印 DIV