So after trying to debug for about 2 hrs. and still no resolution, I'm here to ask for some help. I'm creating a simple chat app in electronjs and there I used a bootstrap modal. An error is occuring:
chat.js:214 Uncaught TypeError: $(...).modal is not a function
I've looked several answers on SO, github, and other results provide by google but none seems working. Then I came across npm i @popper/core which, I thought might help, as modal is also sort of popup...but this too doesn't helped.
In electronjs, I've single page homepage.html and script.js with css also. However, in the beginning of project (now I'm too far in it) I was troubling in including .js scripts through CDN (tried to resolve that too but couldn't) so I npm i them and stored locally. However, calling them from html file's end <script src="../src/jquery.min.js"></script> was showing "ERROR: File Couldn't be found" so in script.js itself, I wrote const $=require('jquery') and other similarly, and that worked. I kept continue and today I got this modal error.
Though css files are from CDN and kept in head tag.
(All other earlier implemented functionalities are working fine but this latest one of modal is not)
Structure of files where any kind of require(...) or script<> or link<> is done are:
Error causing code
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
Please tell if any specific packages I'm missing or ordering or something :/
PS: Please not that I've done a lot of reading of related issues and answers on google but can't include links to all of them as they were a lot. Though some of the most engaged were:
Bootstrap : TypeError: $(...).modal is not a function
Finally... after reading several articles I found a single line which worked as magic for me, saved my day.
If anyone is also troubling due to some issue with jQuery saying something is not defined , though you know it is, make sure you include this line window.$ = window.jQuery = $; at the very beginning of your script file.
This was the only line causing trouble in my case. (Using CDN or local dist or popper.js was actually immaterial to the trouble raised in my case)