Overview I am trying to embed a video in my electron app. My main.js script loads a page called index.html. index.htm then sources a scripts called app.js for the functionality of the page. In app.js, I a few embedded videos as so
for (let vid of shuffledVideos){
try{
let cuurVid = await Video.findById(vid);
console.log(cuurVid)
let d = document.createElement('div');
d.classList.add("videoCard")
mediaDisp.append(d)
let i = document.createElement("iframe");
i.setAttribute("src", cuurVid.link)
i.setAttribute("allowfullscreen", "allowfullscreen")
i.setAttribute("width", "650")
i.setAttribute("height", "490")
i.setAttribute("frameborder", "0")
i.setAttribute("scrolling", "no")
d.append(i)
}
catch{
console.log(`Failed to create video: ${vid}.`)
}
}
When it runs I get the error "Uncaught ReferenceError: jQuery is not defined at embed-en.js?2740:222". I've tried a few things listed below.
Things I've Tried
I've tried the things in this post: Electron: jQuery is not defined but maybe I'm just doing them wrong. At the end of my body tag in index.html, I tried doing this
<script>window.$ = window.jQuery = require('jquery');</script>
<script>
require("../js/renderer.js")
</script>
<script src="../js/app.js"></script>
as well this
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script type="text/javascript" src="./../js/jquery-3.6.0.min.js"></script>
require("../js/renderer.js")
</script>
<script src="../js/app.js"></script>
<script>if (window.module) module = window.module;</script>
and both output the same error. I also tried npm installing jQuery and requiring it at the top of app.js by doing
const jQuery= require("jquery")
Any help is appreciated.